Animaciones CSS con @keyframes

Si en el post anterior vimos las transiciones animadas con CSS3, en este post daremos un paso más allá y veremos animaciones puras y con un sinfín de posibilidades

con @keyframes. Para entender bien como funciona tenemos que saber el concepto de fotograma clave, muy utilizado en animaciones Flash. Un fotograma clave es un punto específico de la animación. Como mínimo tiene que haber 2 (principio y fin) en una animación. En @keyframes podemos utilizar estos fotogramas claves como guía de la animación. Tenemos las palabras from y to para indicar el fotograma inicial y el final. También podemos utilizar los porcentajes si queremos poner fotogramas intermedios. Si hasta ahora os ha sonado a chino lo mejor es poner un ejemplo. Imaginemos que queremos mover un elemento a la derecha 200px y que a la mitad de la animación ya recorra 150px. Sería así:

@keyframes miAnimacion{
   from { left: 0px; }
   50% { left: 150px; }
   to { left: 200px; }
}

Podemos poner tantos fotogramas como queramos. Ahora solo hace falta asignar la animación al elemento de nuestra web. Para ello tenemos varias propiedades.

animation-name: Indicamos el nombre de la animación que hemos puesto en la @keyframes.
animation-duration: La duración en segundos de la animación.
animation-iteration-count: El número de veces que se repite la animación. Podemos utilizar la palabra infinite para que se repita hasta el fin de los tiempos.
animation-direction: Indicamos la dirección de la animación. El valor por defecto es normal. Si indicamos alternate, cuando la animación finalice y se vuelva a ejecutar lo hará en sentido contrario.
animation-timing-function: Al igual que con las transiciones indicamos la curva de velocidad.
animation-delay: Indicamos el retardo de la animación. Si no indicamos nada el valor por defecto es 0.

Por supuesto, para esta propiedad también tenemos un shorthand:

animation: nombreAnimacion 3s infinite alternate 0.2s;

Importante utilizar los prefijos -webkit- y -moz- para mayor compatibilidad con todos los navegadores. También es importante utilizar position: relative en el elemento que vamos a animar. Aquí un ejemplo:

@keyframes animacionFlecha {
    from { top: 0px; }
    to { top: 15px; }
}

.flecha{
    animation: animacionFlecha 1s infinite alternate;
    position: relative;
}