CSS 3

Configurando a animaçã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 completar 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

Exemplos

Fazendo o texto deslizar através 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%;
  }
}

Adicionando outro keyframe

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

Faça repetir-se

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

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

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

<p> A Lagarta e Alice olharam-se por algum tempo em silêncio: 
finalmente, a Lagarta tirou o narguilé da boca e dirigiu-se a 
ela com uma voz lânguida e sonolenta.</p>

Usando eventos de animação

Adicionando o CSS

.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

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

e.className = "slidein";

Recebendo os eventos

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);
}

• 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