Usando animações CSS

Animações CSS3 tornam possivel animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

1. São de fácil utilização para animações simples; você pode criá-las sem mesmo ter que conhecer JavaScript.
2. As animações executam bem, mesmo sobre moderada carga do sistema. Animações simples podem normalmente ser executadas precariamente em JavaScript (a não ser que sejam bem feitas). A ferramenta de renderização pode usar frame-skipping e outras técnicas para manter a performance o mais estável possível.
3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance e eficiência em, por exemplo, reduzir a frequência de update de animações correndo em abas que não estão visíveis no momento.

Configurando a animação

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade animation ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a de como a sequência de animação deveria progredir. Isso não configura a aparência atual da animação, que é feita usando a regra com parênteses (at-rule) @keyframes como descrito em Defining the animation sequence using keyframes abaixo.

 As sub-propriedades da propriedade animation são:

animation-delay

Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.

animation-direction

Configura se a animação deve ou nao 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 complear um ciclo.

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 com parênteses (at-rule) @keyframes at-rule descrevendo os keyframes da animação.

animation-play-state

Permite voce pausar e resumir a sequência da animação.

animation-timing-function

Configura a sincronização da animação; que é, como a animação transita por keyframes, por estabilizar curvas de aceleração.

animation-fill-mode

Configura que valores são aplicados pela animação antes e depois de se executar.

Definindo a sequência de animação usando keyframes

Uma vez que você configurou a sincronização da animação, voce precisa definir a aparência da animação. Isso é feito por estabelecer duas ou mais keyframes usando a regra com parênteses (at-rule) @keyframes. Cada keyframe descreve como o elemento animado deveria se renderizar a um tempo dado durante a sequência de animação.

Como a sincronização da animação é definida por um estilo CSS que configura a animação, keyframes usam uma percentage  para indicar o tempo durante a sequência de animação que eles fazem parte. 0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação. Esses dois tempos devem ser especificados para que o navegador então saiba onde a animação deve começar e parar; por serem tão importantes, esses dois tempos tem expressões equivalentes especiais: from e to.

Você pode opcionalmente incluir keyframes adicionais que descrevem passos intermediários ao longo do caminho do ponto inicial ao ponto final da animação.

Exemplos

Fazendo o texto deslizar através da janela do navegador

Esse exemplo simples estiliza o elemento <p> onde o elemento então deslisa para dentro vindo de fora da lateral direita da janela do navegador.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

O estilo para o elemento <p> aqui especifia que a animação deveria levar 3 segundos para executar do início ao fim, usando a propriedade animation-duration, e que o nome da regra com parênteses (at-rule)@keyframes definindo os keyframes para a sequência de animação é nomeado por "slidein".

Se quisessemos quaisquer estilização customisada no elemento <p> para aparecer em navegadores que não suportam animações CSS, incluiríamos aqui também; no entanto, nesse caso não queremos nenhuma estilização customisada a não ser o efeito da animação.

Os keyframes são definidos utilizando-se as regras @keyframes. Neste caso, utilizamos apenas dois keyframes. O primeiro ocorre no progresso de 0% (ou seja, o primeiro keyframe da animação, através do pseudônimo from). Nesta etapa, configuramos a margem esquerda do elemento para ser 100% - quer dizer, como a margem está à esquerda e com valor 100%, o elemento irá se deslocar para o seu limite, ou seja, para a parte direita – e sua largura será de 300%, ou seja, 3 vezes a largura do seu tamanho original. Isto faz com que o elemento, em seu primeiro frame da animação, seja “empurrado” para fora do limite da parte direita da janela do navegador.

O segundo (e último) keyframe ocorre na etapa 100% do progresso (ou seja, o último keyframe da animação, através do pseudônimo to). A margem esquerda está com valor de 0% e a largura do elemento está com valor de 100%. Isto resulta na animação do elemento <p>, que entra gradativamente na área de conteúdo até atingir uma margem esquerda de 0%.

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Adicionando outro keyframe

Vamos adicionar outro keyframe à animação do exemplo anterior. Digamos que nós queremos que o tamanho da fonte aumente durante o movimento da direita para a esquerda por um determinado momento, e que depois ele reduzisse ao seu tamanho original. Você precisaria simplesmente adicionar este keyframe:

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Isso indica ao navegador que até atingir a etapa 75% do progresso da sequência da animação o elemento deve ter 25% no valor da sua margem esquerda e sua largura deve ser de 150%. 

Faça repetir-se

Para fazer a animação se repetir, simplesmente use a propriedade animation-iteration-count para indicar a quantidade de vezes que a animação deve se repetir. Neste caso, vamos usar infinite para que a animação se repita indefinidamente:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Fazendo a animação se mover para trás e para frente

Com o exemplo anterior, fizemos a animação se repetir, mas é muito estranho tê-la pulando lá do início toda vez que a animação inicia. O que nós realmente queremos é que a animação se mova para trás e para frente por toda tela. Isso é facilmente realizado se adicionarmos o valor alternate à propriedade animation-direction:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Using animation events

You can get additional control over animations -- as well as useful information about them -- by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event.

We'll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work.

Adding the CSS

We start with creating the CSS for the animation. This animation will last for 3 seconds, be called "slidein", repeat 3 times, and alternate direction each time. In the @keyframes, the width and margin-left are manipulated to make the element slide across the screen.

.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
      
  to {
    margin-left:0%;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

Adicionando animação a lista de eventos

We'll use JavaScript code to listen for all three possible animation events. This code configures our event listeners; we call it when the document is first loaded in order to set things up.

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

This is pretty standard code; you can get details on how it works in the documentation for element.addEventListener(). The last thing this code does is set the class on the element we'll be animating to "slidein"; we do this to start the animation.

Why? Because the animationstart event fires as soon as the animation starts, and in our case, that happens before our code runs. So we'll start the animation ourselves by setting the class of the element to the style that gets animated after the fact.

Receiving the events

The events get delivered to the listener() function, which is shown below.

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

This code, too, is very simple. It simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note to the <ul> (unordered list) we're using to log these events.

The output, when all is said and done, looks something like this:

• Started: elapsed time is 0
• New loop started at time 3.01200008392334
• New loop started at time 6.00600004196167
• Ended: elapsed time is 9.234000205993652

Note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. Note also that after the final iteration of the animation, the animationiteration event isn't sent; instead, the animationend event is sent.

The HTML

Just for the sake of completeness, here's the HTML that displays the page content, including the list into which the script inserts information about the received events:

<h1 id="watchme">Watch me move</h1>
<p>
  This example shows how to use CSS animations to make <code>H1</code>
  elements move across the page.
</p>
<p>
  In addition, we output some text each time an animation event fires,
  so you can see them in action.
</p>
<ul id="output">
</ul>
</body>

See also

• AnimationEvent
• Detecting CSS animation support