Noutro dos meus artigos viste como fazer animações simples com a propriedade css transition, ou seja, levar uma propriedade de um valor a outro através das transições CSS3. Acontece que as transições CSS3 dão pouco controlo sobre a forma como a animação avança no tempo.
A propriedade css animation, essa, permite criar animações por fotogramas-chave (@keyframes).
Criar animações CSS3
As animações CSS assentam em keyframes, que te permitem indicar como as propriedades CSS mudam ao longo do tempo, ao estilo das animações do Flash.
- O primeiro passo para criar uma animação CSS é definir os fotogramas-chave um a um e dar um nome à animação, declarando os seus keyframes.
- O segundo passo é referenciar esses keyframes pelo nome com a propriedade animation-name, e acrescentar a propriedade animation-duration e outras propriedades de animação facultativas para controlar o comportamento da animação.
Ainda assim, não é preciso definir todo o conjunto de regras keyframes antes de o referenciar ou de o aplicar.
O exemplo seguinte mostra-te como animar uma <div> na horizontal, de uma posição para outra, com a propriedade css animation.
See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Tens de indicar pelo menos duas propriedades para que a animação aconteça: animation-name e animation-duration (superior a 0). Todas as outras propriedades de animação são facultativas, porque os valores predefinidos não impedem a animação de correr.
Nota: nem todas as propriedades CSS são animáveis. Regra geral, qualquer propriedade CSS que aceite valores em números, comprimentos, percentagens ou cores é animável.
Definir os fotogramas-chave (keyframes)
Os fotogramas-chave servem para indicar os valores das propriedades de animação em diferentes fases da animação. Declaram-se com uma regra de estilo CSS própria – @keyframes. O seletor de um fotograma-chave começa por uma percentagem (%) ou pelas palavras-chave from (a partir de 0 %) ou to (a partir de 100 %). É esse seletor que situa o fotograma-chave ao longo da duração da animação.
As percentagens representam uma fração da duração da animação. 0 % é o ponto de partida, 100 % o ponto de chegada, 50 % o ponto médio, e assim por diante. Por outras palavras, um fotograma-chave a 50 % numa animação de 2 segundos fica a 1 segundo do início.
See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
A propriedade animation abreviada
Há muitas propriedades a ter em conta quando se cria uma animação. Mas também é possível indicá-las todas numa única propriedade, para encurtar o código.
A propriedade animation é um atalho que define de uma só vez todas as propriedades de animação individuais, pela ordem indicada. Por exemplo:
See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Nota: se faltar um valor ou se ele não for indicado, é usado o valor predefinido dessa propriedade. Por outras palavras, se faltar o valor de animation-duration, não acontece transição nenhuma, porque o valor predefinido é 0.
Propriedades de animação CSS3
A tabela seguinte dá uma visão rápida de todas as propriedades css animation ligadas à animação.
| Propriedade | Descrição |
|---|---|
|
animation |
Propriedade abreviada que define todas as propriedades da animação numa só declaração. |
|
animation-name |
Indica o nome das animações definidas por @keyframes que devem ser aplicadas ao elemento selecionado. |
|
animation-duration |
Indica quantos segundos ou milissegundos são precisos para completar um ciclo da animação. |
|
animation-timing-function |
Indica como a animação progride ao longo de cada ciclo, ou seja, as funções easing, ease-in, ease-out, …. |
|
animation-delay |
Indica quando a animação começa. |
|
animation-iteration-count |
Indica quantas vezes um ciclo de animação é reproduzido antes de parar. |
|
animation-direction |
Indica se a animação deve ou não ser reproduzida em sentido inverso nos ciclos alternados. |
|
animation-fill-mode |
Indica como uma animação CSS aplica estilos ao seu alvo antes e depois de correr. |
|
animation-play-state |
Indica se a animação está a decorrer ou em pausa. |
|
@keyframes |
Indica os valores das propriedades de animação em diferentes momentos da animação. |
Conclusão
Já tens as bases para criar animações CSS3. Também te podes apoiar em bibliotecas de animação que tornam o trabalho bem mais rápido.
