Animaciones
Las transiciones animan elementos con el tiempo; sin embargo, están limitadas en lo que se puede hacer. Es posible definir un inicio y un final, pero no hay control sobre ningún estado intermedio.
Las animaciones CSS, a diferencia de las transiciones, permiten controlar cada paso de una animación mediante 'fotogramas clave' (instantánea que define un punto de inicio o fin de cualquier transición).
Las transiciones están limitadas a definir el primero y el último. Las animaciones nos permiten añadir cualquier número de fotogramas clave entre el primero y el último.
Para crear animaciones debemos tener dos cosas claras. Por un lado, la regla @keyframes, que incluye los fotogramas de la animación, mientras que por otro lado tenemos las propiedades CSS de las animaciones, que definen el comportamiento de la misma.
Fotogramas clave
Para animar un elemento CSS primero se crea una animación con un nombre cualquiera, después es necesario asociar la animación con él.
Para crear una animación utilizamos la regla @keyframes seguida del nombre que queramos darle a la animación y que servirá para identificar esa animación particular. Después especificamos los fotogramas clave.
Se utilizan las palabras clave from o to; o mediante porcentajes % o lista de valores de porcentaje separados por una coma. Estos valores especifican donde está el fotograma clave en la animación. Dentro de cada fotograma clave se incluyen las propiedades y valores que deseemos. Entre cada uno, los valores se interpolarán de forma suavizada por el motor del navegador.
Propiedades de animación
animation-name
Se utiliza para asociar una animación a un elemento.
animation-name: 'miAnimacion';
animation-timing-function
Especifica como progresará la animación durante su duración. Las opciones son: linear, ease, ease-in, ease-out, ease-in-out o cubic-bezier.
animation-timing-fuction: linear;
animation-duration
Define el tiempo, en segundo o milisegundos, que una animación tarda en completar una iteración (desde 0% a 100%).
animation-duration: 300ms;
animation-iteration-count
Especifica cuántas veces se repetirá la animación. El valor es un número o infinito
animation-iteration-count: infinite;
animation-direction
Cuando la animación se repite podemos utilizar esta propiedad con el valor alternate para hacer que cada iteración reproduzca la animación al revés.
Valores posibles: normal | reverse | alternate | alternate-reverse
animation-direction: alternate;
animation-delay
Especifica cuántos milisegundos o segundos hay que esperar antes de que el navegador reproduzca la animación.
animation-delay: 10s;
animation-fill-mode
Define lo que sucede antes de que empiece la animación y después de que termine. Podemos decirle que espere en el primer fotograma clave o que se pare en el último, sin regresar a los valores originales cuando termine; o ambas cosas. Los valores disponibles son: none (por defecto), forwards (deja la animación como el último fotograma clave, backwards (se aplica los fotogramas clave iniciales), both (ambos efectos).
animation-fill-mode: forwards;
animation-play-state
Define si la animación está running o paused. Una animación detenida muestra su estado actual estáticamente. Cuando una animación pausada se reanuda, vuelve a empezar dede la posición actual.
Propiedad abreviada (shorthand)
Existe un método abreviado para todas estas propiedades de animación. La propiedad animation toma como su valor una lista de valores separados por un espacio para las propiedades:
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Ejemplo
animation: 'animacionUno' 500ms ease-out 2 alternate 5s backwards;
Para declarar múltiples animaciones en un elemento incluiremos un grupo de propiedades para cada nombre de animación, separandolos mediante una coma.
animation: 'animacionUno' 500ms ease-out 2 alternate 5s backwards,
'animacionDos' 600ms ease-in 1 alternate 1s forwards;