Las animaciones css nos permiten modificar el estilo de los elementos de la web de una forma animada, consiguiendo de esta forma un diseño mucho más dinámico y atractivo. Con las transiciones de css podemos hacer cosas parecidas pero nunca a un nivel tan específico como las animaciones, ya que con estas últimas, podemos controlar en cualquier momento el estado de la animación. Es recomendable el uso de prefijos para mantener la compatibilidad con navegadores más antiguos.
Animation-name: Nombre de la animación.
Animation-duration: Duración de la animación en segundos o milisegundos. Si queremos desactivar la animación, ponemos 0.
Animation-timing-functionEspecifica la curva de velocidad de la animación, es decir, si queremos que mantenga una velocidad constante, o un comienzo o final rápido, lento, etc.
Animation-delay: Retardo en segundos antes de comenzar la animación.
Animation-iteration-countt: Específica cuantas veces se reproduce la animación, también podemos ponerle que se reproduzca infinitamente.
Animation-direction: Dirección de la animación, de forma normal, marcha atrás o alternando, es decir que siga el orden que hemos especificado, o al revés de éste o que vaya cambiando de modo que las iteraciones impares sigan una dirección normal y las pares una dirección contraria. Esto último funcionará siempre y cuando animation-iteration-count sea mayor a 1.
Animation-play-state: Especifica si la animación se está ejecutando o está en pausa.
Animation-fill-mode: Nos permite indicar si el elemento afectado, mantiene o no el estilo cuando termina la animación. Por ejemplo si le indicamos forwards mantendrá el estilo con el que ha terminado la animación.
Podemos cambiar el color de un objeto:
#anim1{Podemos mover objetos durante el tiempo deseado, en este caso de manera indefinida:
#anim2{Podemos variar las velocidades de los objetos: