Animaciones CSS

Una vez conocemos las transiciones CSS, es muy fácil adaptarnos al concepto de animaciones CSS, el cual amplia lo que ya sabemos de transiciones, convirtiéndolo en algo mucho más flexible y potente, en el que no es necesario que el usuario desencadene la animación (como ocurre con las transiciones).

Para crear animaciones CSS es necesario realizar 2 pasos:

• 1️⃣ Utilizar la propiedad animation para indicar que elemento HTML vamos a animar.
• 2️⃣ Definir mediante la regla @keyframes los estados de la animación (fotogramas clave).

En primer lugar, vamos a examinar las diferentes propiedades relacionadas con las animaciones, y más adelante veremos como crear fotogramas con la regla @keyframes.

Propiedades de animación CSS

Para el comportamiento de una animación, necesitamos conocer las siguientes propiedades, que son una «ampliación» de las propiedades de las transiciones CSS:

En las siguientes secciones explicaremos detenidamente cada una de estas propiedades y su funcionamiento.

Nombre de la animación

La propiedad animation-name permite especificar el nombre de la animación, asociando el elemento HTML que contiene la propiedad, con la regla @keyframes con dicho nombre. El nombre de la animación debería estar en kebab-case (y no en camelCase u otras).

De forma similar a las transiciones, existen propiedades equivalentes:

• La propiedad animation-duration establece el tiempo de duración de la animación.
• La propiedad animation-delay establece el retardo en empezar la animación.
• La propiedad animation-timing-function establece el ritmo de la animación.

Número de repeticiones

La propiedad animation-iteration-count permite indicar el número de veces que se repite la animación, pudiendo establecer un número concreto de repeticiones o indicar la palabra clave infinite para que se repita de forma indefinida.

Por defecto, si no se indica nada, esta propiedad tiene el valor 1, por lo que la animación se realiza una vez y se detiene.

Dirección de la animación

Por otra parte, especificando un valor en la propiedad animation-direction conseguiremos indicar el orden en el que se reproducirán los fotogramas, pudiendo escoger un valor entre los siguientes:

Las direcciones alternate pueden ser realmente útiles para ahorrarnos crear otros fotogramas, si vamos a utilizar un mismo fotograma tanto en orden natural como inverso sin ningún cambio adicional.

Modo de completado

Por defecto, una animación antes de arrancar y después de terminar (si no está establecida en repetición infinite) no tiene aplicados los estilos de la animación especificada en cuestión. Esto se puede ver fácilmente, por ejemplo, cuando termina una animación, que vuelve a sus «estilos iniciales».

Mediante la propiedad animation-fill-mode podemos indicar que debe hacer la animación cuando no se está reproduciendo, tanto al principio de la animación (si tienes un delay) como al final de la animación:

• El valor none no aplica estilos del @keyframes ni antes ni después de la animación.
• El valor backwards aplica los estilos del primer fotograma antes de que empiece la animación.
• El valor forwards mantiene los estilos del último fotograma al terminar la animación.
• El valor both habilita los dos casos anteriores: backwards y forwards.

Estado de la animación

Por último, la propiedad animation-play-state nos permite establecer la animación a estado de reproducción running o pausarla mediante el valor paused. Esto puede que no sea demasiado útil en CSS (puede llegar a serlo utilizado con pseudoclases CSS), pero da muchas más posibilidades cuando lo combinamos con Javascript.

Atajo: Animaciones

Nuevamente, CSS ofrece la posibilidad de resumir todas estas propiedades en una sola, para hacer nuestras hojas de estilos más compactas. El orden recomendado para los valores de la propiedad de atajo sería el siguiente:

.element {
  /* animation: <name> <duration> <timing-function> <delay>
                <iteration-count> <direction> <fill-mode> <play-state> */

  animation:
    change-color 5s linear 0.5s 4 normal forwards running;
}

OJO: Mucho cuidado al indicar los segundos en las propiedades animation-duration y/o animation-delay. Si no indicamos la unidad (incluso con valores de cero), se interpretará como el valor de la propiedad animation-iteration-count, que es el número de veces que se repite la animación (y no lleva unidad).