Apenas complementando o que já encontrou ai para a galera que não conhece ainda.
Animações em CSS3 podem ser criadas usando a propriedade @keyframes, que a propósito é uma propriedade muito poderosa.
Ela pode ser definida da seguinte maneira:
@keyframes nome_da_animacao {
/* Passos */
from {
/* Estado inicial */
}
to {
/* Estado final */
}
}
Você ainda pode definir os passos para a animação em porcentagem ao invés de from
e to
@keyframes nome_da_animacao {
/* Passos */
0% {
/* Estado inicial */
}
50% {
/* Estado aos 50% da animação */
}
100% {
/* Estado final */
}
}
Logo depois que criar sua animação, para adicionar ela ao elemento basta usar a propriedade animation.
#elemento {
/* nome_da_animacao + propriedades */
animation: nome_da_animacao 1s infinite;
}
De acordo com a documentação no MDN a propriedade animation
tem as seguintes configurações:
Infelizmente ainda é necessário o uso de prefixos para que funcione bem na maioria dos browsers modernos; Tanto na declaração da animação, como quando for aplicar ao elemento.
Segue um exemplo de animação usando o @keyframes
: http://jsfiddle.net/Wagner/kLrzpz6x/embedded/result
Excelente artigo no CSS Tricks falando a respeito: http://css-tricks.com/snippets/css/keyframe-animation-syntax