Animaciones: propiedades
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-function: Especifica 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.
linear: Mantiene la misma velocidad de principio a fin. ease: Comienzo lento, luego rápido y termina lento. ease-in: Comienza lento, y después mantiene velocidad. ease-out: Mantiene velocidad con un final lento. ease-in-out: Comienzo y fin lentos, muy similar a ease sólo que este último empieza más rápido de lo que termina. cubic-bezier: Podemos configurar la curva de velocidad a nuestro gusto utilizando la función cúbica de Bezier.
Acepta cuatro valores entre 0 y 1.
Animation-delay: Retardo en segundos antes de comenzar la animación.
Animation-iteration-count: 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.
KeyFrames
Los keyFrames son una parte esencial de las animaciones, ya que con ellos definimos los estilos que serán aplicados al elemento durante la animación. Debemos tener al menos dos keyframes, el inicial y el final. La forma de declarar los distintos estados de la animación es a través de “from” y “to”, aunque lo más común es hacerlo mediante porcentajes lo que nos permite tener más keyframes intermedios.