As animações via CSS são uma forma simples de criar pequenos efeitos na página de forma rápida e simples e que não necessitam de conhecimento de Javascript.

Uma animação CSS consiste em animar a transição de estilo CSS para outro, como a posição de uma imagem de fundo, a rotação de uma imagem, etc. Uma animação consiste de dois componentes: um estilo descrevendo a animação e um set de keyframes que descrevem o estado inicial e final do estilo CSS de um elemento e, se necessário, os estados intermediários da animação.

Para configurar a animação você estiliza o elemento da página que você quer animar com a propridade animation ou suas sub-propriedades. A propriedade animation configura detalhes como quantas vezes esta deve repetir, quanto tempo deve durar, qual o atraso para a animação iniciar, etc, a aparência da animação deve ser definida através da regra @keyframes. Segue a lista de sub-propriedades de animation:

  • animation-delay: Configura o delay entre o tempo em que o elemento é carregado na página e o inicio da sequência de animação. O valor deve ser informado em segundo(10s) ou milissegundos(5000ms).
  • animation-direction: Configura se a animação deve ou não alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
  • animation-duration: Configura o tempo que uma animação deveria levar para completar um ciclo. Também informado em segundos, ou milissegundos.
  • animation-iteration-count: Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
  • animation-name: Especifica o nome da regra @keyframes que irá descrevendo os keyframes da animação.
  • animation-play-state: Permite você pausar e resumir a sequência da animação. Os valores aceitos são paused e running, normalmente alterados via Javascript.
  • animation-timing-function: Configura a curva de velocidade de como a animação transita por keyframes, os valor possíveis são:
    • ease – especifica uma animação com o inicio lento, depois rápido e termina lentamente(é o padrão)
    • linear – especifica uma animação com a mesma velocidade de inicio e fim
    • ease-in – especifica uma animação com um começo lento
    • ease-out – especifica uma animação com o final lento
    • ease-in-out – especifica uma animação com um inicio e final lento
    • cubic-bezier(n,n,n,n) – deixa você definir seus valores em uma função cubic-bezier
  • animation-fill-mode: Configura que valores são aplicados pela animação antes e depois de se executar. Aceita os valores none, forwards, backwards, both.

Configurada a sincronização da animação é necessário definir a aparência da animação, o que é feito definindo duas ou mais transições utilizando a regra @keyframes que define qual transição deve ser aplicada a um dado momento durante a animação.

Como o tempo total de animação é definido na propriedade animation-duration do elemento a ser animado, devemos informar no @keyframes usando uma porcentagem, sendo 0% o início da animação 100% o final, também podemos referir o início da animação como to e from e to como final. Lembrando que podemos inserir diversos pontos intermediários para a animação.

Veja um exemplo de animação para entender melhor: 

#deslizar{
    display:inline-block;
    background:#66F;
    color:#FFF;
    padding:5px;
    border-radius:5px;
             
    animation-name: deslizar; 
    animation-duration: 5s;
    animation-iteration-count: 3;
}
 
@keyframes deslizar{
    from{ margin-left:0; }
    10%{ transform: rotate(10deg); }
    50%{ margin-left:500px; transform: rotate(0deg); }
    60%{ transform: rotate(-10deg); }
    to{ margin-left:0; transform: rotate(0deg); }
}

Veja o exemplo funcionando

Começamos selecionando o elemento que desejamos animar, depois configuramos a animação. Na linha 8 definimos que o keyframe que iremos utilizar para esta animação será o “deslizar” que iremos definir um pouco abaixo. Na linha 9 definimos que nossa animação irá irá durar 5 segundos, também poderíamos definir este tempo em milissegundo utilizando “5000ms”. Na linha 10 definimos que nossa animação irá se repetir 3 vezes, para ela ser eterna poderíamos colocar o valor “infinite“.

Na linha 13 declaramos nosso @keyframes com o nome “deslizar”, que será utilizado na animação configurada acima. No keyframes definimos todos os “pontos de animação”, começando do estado inicial da animação, declarado na linha 14, pelo from sendo este o estado inicial de nossa animação. Na linha 15 definimos que aos atingir os 10% da animação(ou no nosso caso aos 0,5s) da animação o elemento deve ter realizar uma transição de rotação para 10 graus.

Na linha 16 definimos que aos 50% da animação(no nosso caso 2,5s de animação) o elemento deve ter margin-left:500px; e terá uma transição de rotação para 0 graus, lembrando que o ultimo ponto de alteração de rotação foi em 10% da animação, então o efeito que será gerado será do ponto 10% até os 50%, diferente da alteração da margem, que o ultimo ponto de alteração no foi no inicio da animação, ou seja, no ponto 0%.

Na linha 17 adicionamos uma modificação na rotação em -10 graus e para o ponto final da animação, na linha 18, a margem volta para 0 e a rotação para 0 graus.

Pode parecer um pouco complexo, mas com alguns testes modificando os valores das propriedades é fácil de entender.

Veja mais alguns exemplos como uma animação de load, uma uma animação de neve ao fundo e uma animação pausável.