css-animations-guia-de-bolso.md

Todos os exemplos inclusos nesse guia estão disponíveis no codepen.

Mapa

• Introdução
  • Recomendações
• Transitions
  • More transitions
• Transforms
  • Transforms 2D
    • Transform scale
    • Transform rotate
    • Transform translate
    • Transform skew
  • Transforms 3D
    • Transform rotateX
    • Transform rotateY
    • Transform rotateZ
• Animations
  • Construindo
    • Keyframe
    • Animation
• Exemplos em UI

Introdução

###Recomendações

Para aproveitar melhor esse guia, é recomendado que se tenha um conhecimento prévio sobre HTML e CSS básico.

##Transitions

Podemos adicionar uma transição de tempo em uma modificação por um determinado elemento. Adicionamos ao elemento a seguinte propriedade:

.elemento {
    transition: <property> <duration>;
}

Um exemplo prático: Queremos modificar a cor de um elemento quando o usuário posicionar o cursor sobre ele.

/* Adicionando uma modificação */
.elemento:hover {
      background-color: tomato;
}

Mas queremos que essa mudança aconteça de forma suave. Então adicionamos uma transição, com a propriedade modificada e a duração que queremos, 1 segundo, por exemplo:

/* Adicionando transição */
.elemento {
     transition: background-color 1s;
}

###More transitions

É possível adicionar também mais propriedades em uma mesma transição separando-as por vírgulas, e dar a elas o mesmo tempo de duração, ou não, exemplo:

/* Adicionando mais transições */
.elemento {
    transition:
        background-color 1s,
        height 1s,
        width 1s,
        opacity 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    height: 70px;
    width: 70px;
    opacity: 0;
}

##Transforms

###Transforms 2D

Podemos adicionar transformações ao elementos, fazendo-os crescerem, girarem, ou se deslocarem, em 2D e também 3D. Transformações que podem ser usadas: scale, rotate, translate, e skew.

####Transform scale

Scale pode fazer com que um elemento cresça ou diminua sua dimensão. Exemplo: para fazer com que um elemento cresça em uma proporção equivalente à metade de seu tamanho usamos scale(1.5); Se quisessemos que ele crescesse o dobro do seu tamanho adicionaríamos scale(2); e assim por diante.

Se adicionadas como hover, por exemplo, pode ser interessante também continuar combinando transformações com transições, fazendo com que as trasnformações sejam mais agradáveis de se ver. Podemos usar all para manter a mesma duração por segundos em uma transição. Exemplo:

/* Adicionando transição */
.elemento {
    transition: all 1s;
}

/* Adicionando modificações */
.elemento:hover {
    background-color: green;
    transform: scale(1.5);
}

####Transform rotate

Rotate como o próprio nome sugere, é capaz de fazer um elemento girar. Podemos fazer com que ele gire usando deg ou turn como valor, 1turn equivale a 360 graus.

/* Adicionando transições */
.elemento {
    transition: all 1s;
}

/* Adicionando modificações */
.elemento:hover {
    background-color: green;
    height: 70px;
    width: 70px;
    transform: rotate(360deg);
}

####Transform translate

Translate desloca o elemento no eixo X ou Y a partir de sua posição original. O valor do deslocamento pode ser dado em qualquer uma das unidades de comprimento do css.

/* Adicionando transições */
.elemento {
    transition: all 1s;
}

/* Adicionando modificações */
.elemento:hover {
    background-color: green;
    transform: translateY(30px);
}

####Transform skew

Skew é capaz de inclinar, ou distorcer, um elemento ao longo dos eixos X e Y.

/* Adicionando mais transições */
.elemento {
    transition: all 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    transform: skew(0deg, 20deg);
}

###Transforms 3D

####Transform rotateX

/* Adicionando mais transições */
.elemento {
    transition: all 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    transform: rotateX(90deg);
}

####Transform rotateY

/* Adicionando mais transições */
.elemento {
    transition: all 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    transform: rotateY(180deg);
}

####Transform rotateZ

/* Adicionando mais transições */
.elemento {
    transition: all 1s;
}

/* Adicionando mais modificações */
.elemento:hover {
    background-color: green;
    transform: rotateZ(90deg);
}

##Animations

###Construindo

Criar uma animação é criar uma lista do que deve acontecer com as propriedades de um elemento em um determinado período de tempo. Há dois passos que devem ser seguidos, primeiro criamos a animação, fazendo uso de um ou mais Keyframes:

/* Criando um keyframe */
@keyframes animacao {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

Depois a adicionamos ao elemento:

/* Adicionando o keyframe criado à animação */
.elemento {
    animation: animacao 1s infinite;
}

###Keyframe

Um keyframe deve dizer onde, quando, e como devem ocorrer modificações nas propriedades.

###Animation

###Exemplos em UI