CSS3 Animation

Animation é quase a mesma coisa que transition, a diferença é que você possui mais controle e mais opções de mover de um estilo para outro com css. Mas cuidado, de acordo com o site html5please.com está feature deve ser usada com cuidado, pois a mesma ainda está em 'construção'.

Propriedades:


   > animation-delay : gera um atraso para a animação começar.

   > animation-direction : direção

   > animation-duration : duração

   > animation-iteration-count : quantidade de iterações

   > animation-name : nome da animação

   > animation-play-state : permite a animação pausar e resumir

   > animation-timing-function : 

   > animation : resumo da propriedade

Formato:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count

A animação propriamente dita é criada em duas partes, uma aonde você define a animação, como ela irá ser feita e a segunda parte é o que deve ser animado (@key-frames)

Exemplo:

http://dabblet.com/gist/2467412