CSS Animations: como utilizar e definir animações no CSS

O Cascading Style Sheets é uma linguagem de estilização muito poderosa. Desde a sua criação, tornou-se peça fundamental no desenvolvimento de interfaces na web. Por meio dela, conseguimos tornar o site visualmente mais agradável para os usuários. Porém, engana-se quem pensa que o seu poder está apenas na estética e nas cores dos elementos.

Utilizando apenas o CSS, também conseguimos criar animações e interfaces dinâmicas em nossas aplicações. E o melhor de tudo é que não precisamos do JavaScript para isso.

Nesse artigo abordaremos sobre o CSS Animations e como utilizá-los em seus códigos. Bora lá?

O que é css animation?

Implementado na última atualização da linguagem, o CSS 3, a propriedade CSS animation aumentou o leque de possibilidades de estilização de layout de uma página na web. O que já era bom, ficou ainda melhor.

Utilizando dessa ferramenta, conseguimos criar efeitos e animações em nossas aplicações, deixando-as totalmente dinâmicas. Dessa forma, tornamos o ambiente mais vivo e interativo para o usuário, sem nenhuma necessidade de utilizar linguagens de programação ou bibliotecas externas para isso.

Qual é a sintaxe do CSS animation?

Para utilizarmos a propriedade animation em nossos códigos, é bem simples. Porém, antes de aprendermos a sua sintaxe, precisamos entender o que é keyframes e como utilizá-lo no CSS.

Keyframes

Os Keyframes são regras definidas, ao criar a estilização de um elemento, para lidarmos com mudanças de propriedades no CSS durante o processo de animação. Para utilizarmos, primeiro precisamos chamá-los através do @keyframes e, em seguida, definirmos um nome para a nossa animação. Após, é necessário especificar como os elementos irão ser modificados no início e no fim utilizando o from/to, traduzindo para o português, de/para. 

No exemplo abaixo, estamos criando uma regra de animação simples, definindo que a cor de background de um elemento irá do vermelho para o azul.

Sintaxe do CSS animation

Agora que já sabemos o que são os keyframes e como defini-los, precisamos vincular essa animação ao seu elemento HTML. Basta utilizarmos a propriedade animation com suas outras propriedades menores de qualificação, que abordaremos em seguida.

Perceba que, na imagem a seguir, vinculamos a nossa animação a uma div através do animation-name. Além disso, também estipulamos uma duração de 4 segundos, usando o animation-duration, para essa animação. Dessa forma, essa mudança de cor no background ocorrerá de maneira gradual.

Keyframes com porcentagem

Além do from/to, também podemos definir as nossas regras de animações utilizando porcentagem. Veremos a seguir um exemplo modificando a cor de background de um elemento quando a animação estiver com 25%, com 50% e com 100% concluída.

Quais são as propriedades do CSS animation?

O CSS animation possui propriedades menores para especificar e referenciar a regra de animação criada com os keyframes. Essas propriedades recebem valores conforme a sua utilização. 

Confira a seguir todas essas propriedades e as suas finalidades em uma animação.

Animation duration

Essa propriedade define em quanto tempo uma animação será concluída. Geralmente, especificamos o seu valor em segundos. Portanto, se quisermos que uma animação ocorra de maneira bem rápida, como, por exemplo, em meio segundo, podemos definir esse valor como 0.5s.

Atente-se ao fato de que se nenhum valor for especificado, nenhuma animação ocorrerá, pois o seu valor padrão é de 0 segundos.

Animation delay

Ao definirmos um delay para uma animação, estamos especificando um atraso para o seu início. Dessa forma, a animação não começará de forma instantânea. 

No exemplo a seguir, utilizaremos a animação anterior, porém com um delay de 2 segundos.

Também é possível utilizar valores negativos nessa propriedade. Assim, a animação começará como se já estivesse acontecendo por um tempo determinado. 

Se substituirmos, no exemplo anterior, o animation-delay por -2 segundos, o elemento aparecerá em tela como se já estivesse com a sua animação sendo reproduzida por 2 segundos.

Animation iteration count

Essa propriedade delimita o número de vezes que uma animação deverá ser executada. Podemos definir o seu valor como um número ou com a palavra-chave infinite, que definirá que aquela animação ocorrerá infinitamente.

Animation direction

Como o próprio nome sugere, essa propriedade tem como finalidade definir a direção para a qual a animação será realizada. 

A propriedade animation-direction pode ter os seguintes valores:

• normal: Esse é o valor padrão. A animação é reproduzida normalmente para a frente.
• reverse: Com esse valor, definimos que a animação será reproduzida na direção inversa ao seu valor normal. 
• alternate: Esse valor alterna a direção a qual a animação ocorre. Dessa forma, é reproduzida primeiro para a frente e depois para trás.
• alternate-reverse: Funciona da mesma maneira que o valor alternate, porém ao inverso. A animação é reproduzida primeiro para trás e depois para a frente.

Animation timing function

Sua finalidade é especificar a curva de velocidade de uma animação. Essa propriedade pode ter os seguintes valores:

• ease: Esse é o valor padrão. Especifica um início lento, ficando rápido ao decorrer da animação e final lento.
• linear: Animação com a mesma velocidade do início ao fim.
• ease-in: Define que a animação terá um início lento.
• ease-out: Especifica uma animação com um final lento.
• ease-in-out: Determina um início e fim lentos. 
• cubic-bezier(n, n, n, n): Permite definir seus próprios valores em uma função para determinar a curva de velocidade da animação.

Animation fill mode

Essa propriedade define um estilo para o elemento de destino antes ou após a animação ser executada. A propriedade animation-fill-mode pode ter os seguintes valores:

• none: É o valor padrão. A animação não aplicará nenhum estilo ao elemento.
• forwards: O elemento manterá os valores de estilo definidos pela última regra definida no keyframes.
• backwards: O elemento obterá os valores de estilo definidos pela primeira regra no keyframes.
• both: A animação seguirá as regras para frente e para trás, estendendo as propriedades em ambas as direções.

Animation

Repare em nossa última imagem utilizada como exemplo em como o nosso código ficou extenso devido ao número de propriedades que utilizamos em nossa animação. Para resolver isso e deixar o nosso CSS mais legível, existe a abreviação de todas essas propriedades em apenas uma: a animation.

A sua sintaxe recebe em ordem: animation-name, animation-duration, animation-timing-function, animation-delay, animation-interation-count, animation-direction e animation-fill-mode. 

Conclusão

As animações são apenas uma parte dos poderes do Cascading Style Sheets. Com a sua chegada, as páginas se tornaram mais interativas e interessantes para os usuários. Utilizá-las em nossos códigos é algo muito importante para criarmos um layout chamativo e dinâmico. Porém, ainda há muito o que aprender e desenvolver com essa linguagem de estilização para se tornar uma excelente pessoa programadora. 
Saiba como a Kenzie Academy pode mudar a sua carreira, fazendo parte das próximas turmas e aprendendo a utilizar o CSS de maneira eficaz e produtiva, aprendendo com exemplos de projetos reais utilizados no mercado de trabalho.