Que tal animar um pouco a sua aplicação com uns truques de CSS?

O css animations é um módulo que permite a criação de animações em uma página web. Além de deixar seu site mais elegante e moderno, você também pode melhorar a interação de seu usuário com sua aplicação.

Abaixo, falarei por onde você poderá começar a dar mais vida nas suas aplicações. Vamos começar vendo como manipular o posicionamento dos elementos e seguir elencando os recursos que estão à nossa disposição. Há basicamente duas categorias: Transform e Transition.

Transform

O transform permite a manipulação visual de um elemento. Através da transformação, você pode rotacionar, movimentar, escalonar etc.

Translate

A propriedade translate desloca um elemento horizontal ou verticalmente. Para posicionar um elemento apenas no eixo X ou Y, utiliza-se a propriedade translateX(valor) ou translateY(valor). Também é possível combinar os dois valores através da propriedade translate(x, y).

Scale

Para aumentar ou diminuir as proporções do elemento, usa-se a opção scale. Aqui, também é possível modificar as dimensões apenas no eixo x scaleX(valor), no eixo y scaleY(valor) ou ambos scale(x, y).

Rotate

O rotate, é responsável por rotacionar o elemento. Os valores podem ser passados em graus (10deg) ou a unidade turn (0.5turn).

Skew

Usa-se o skew para inclinar um elemento. Essa propriedade recebe um valor em grau e pode alterar o eixo x, y ou ambos através de skewX(valor), skewY(valor), skew(x, y) respectivamente.

É possível encadear várias dessas propriedades no shorthand transform:

transform: translate(10px)scale(1.5)rotate(45deg)skew(10deg);

Para ver um exemplo usando transform, acesse codepen.io/diegodnunes12

Transition

O Transition controla a velocidade da transição de valores de uma propriedade CSS. Dessa forma, ao invés do elemento ser alterado de forma instantânea, você pode controlar o tempo para esse processo, deixando mais suave a transformação.

Transition-property

Indica que propriedade passará pela transformação.

Transition-duration

Informa a duração da transição.

Transition-delay

Tempo entre o gatilho e o início da transição propriamente dito.

transition-timing-function

Descreve uma curva de aceleração para a transição. Alguns valores possíveis são:

• ease: Inicia a transição de forma lenta, acelera e depois volta a ficar lenta no final;
• linear: A velocidade da transição se mantém do início ao fim;
• ease-in: Inicia de forma mais suave;
• ease-out: Finaliza de forma mais suave;
• ease-in-out: Suaviza no início e no final.

Você também pode personalizar usando a função cubic-bezier(), passando os valores da função de tempo. Por exemplo: cubic-bezier(.15, .10, .20,.30).

Para ver um exemplo usando transition, acesse codepen.io/diegodnunes12

@keyframes

Os keyframes controlam as etapas de uma sequência de animação em CSS, especificando o que acontecerá em cada momento.

@keyframes  box {
   0% ou from { ... }
   50% { ... }
   100% ou to { ... }
}

No código acima, temos um keyframe com o nome box, nele inserimos três pontos chaves: O ínicio que pode receber os valores 0% ou from, o meio através dos 50% e o final onde podemos inserir 100% ou to. Entre o início e o fim pode haver quantos pontos chaves necessários.

Para executarmos o keyframes, vamos ao elemento que desejamos animar e inserimos as seguintes informações:

Animation-name

Nome da animação, inserido após o keyframes. No nosso exemplo, box.

Animation-duration

Duração da animação. Aceita valores em segundos (s) ou em milissegundos (ms).

Animation-timing-function

Como a animação progride em cada ciclo. Como no transition-timing-function são aceitos os valores ease, linear, ease-in, ease-out, ease-in-out e a personalização utilizando a função cubic-bezier(1,1,1,1). No entanto, aqui podemos também inserir a função steps, que indica os pontos da animação. Exemplo: steps(3).

Animation-delay

Tempo de espera entre o gatilho para o início de fato da animação.

Animation-iteration-count

Número de vezes que a animação será reproduzida. Podem ser valores inteiros (3), fracionados (2.5) e chave infinite para ficar sempre executando.

Animation-direction

Especifica a direção da animação. Os valores podem ser:

• Reverse: Executa de trás para frente;
• Alternate: Alterna a forma de execução, primeiro executa de frente para trás e depois de trás para frente;
• Alternate-reverse: Alterna a forma de execução, primeiro executa de trás para frente e depois de frente para trás.

Animation-fill-mode

Define os valores que serão aplicados antes e/ou depois da animação. Os valores aceitos são:

• Forwards: Significa que o último estilo da animação será mantido;
• Backwards: Informa que o estilo inicial da animação será mantido;
• Both: A animação seguirá as regras para frente e para trás, estendendo as propriedades da animação em ambas as direções.

Animation-play-state

Define se a aplicação está sendo executada ou pausada: running e paused. No caso, você pode colocar um paused quando houver um hover no elemento para a animação parar enquanto o usuário estiver com o mouse sobre o elemento.

Aqui também é possível utilizar um shorthand animation, como no exemplo abaixo:

div { animation: box 5s infinite; }

Para ver um exemplo usando keyframes, acesse codepen.io/diegodnunes12

Próximos passos

Para concluir, gostaria de recomendar o mini curso de animações CSS do canal do youtube: desenvolvimento para web, que me ajudou demais no início dos meus estudos sobre esse assunto.

Espero ter ajudado e até a próxima.