¿Qué son las animaciones?

Si aún no conoces las Transiciones CSS, es conveniente aprenderlas antes de empezar con Animaciones CSS. Te resultará más sencillo y aprenderás las bases de las animaciones.

Aunque el concepto Animaciones suele usarse muy frecuentemente y de forma muy general, en el desarrollo web, las Animaciones CSS son el concepto siguiente a las Transiciones CSS.

Estados y transiciones

Mientras que en temas anteriores aprendimos que las Transiciones CSS son cambios de un estado inicial a un estado final, en el caso de las Animaciones CSS se trata de un conjunto de transiciones entre estados, de modo que es posible cambiar entre dos o más estados, a diferencia de las transiciones, donde solo puedes cambiar entre dos estados.

En las animaciones, nosotros definimos los estados o fotogramas clave de una animación dándole estilos mediante propiedades CSS, y el navegador se encarga de crear los fotogramas intermedios entre un estado y otro, para que se produzca la animación y no tengamos que definir cientos de estados o fotogramas intermedios.

En las transiciones, era necesario tener un desencadenante para activar la transición o cambio de estado. En el caso de las animaciones, aunque también se puede hacer, no es necesario definir un desencadenante, ya que las animaciones se pueden iniciar automáticamente sin necesidad que el usuario realice acciones, por ejemplo, al cargar la página.

Animación y fotogramas

En las Animaciones CSS es necesario definir dos pasos para crear una animación:

• 1️⃣ En primer lugar, usar la propiedad animation en el elemento HTML a animar.
• 2️⃣ En segundo lugar, crear las animaciones mediante la regla @keyframes.

Veamos un ejemplo, muy sencillo de una animación de 2 estados:

.element {
  width: 100px;
  height: 100px;
  background: grey;
  animation: change-color 5s;
}

@keyframes change-color {
  from { background: red; }
  to { background: green; }
}

<div class="element"></div>

En principio, es muy similar a una transición CSS. En el siguiente artículos veremos más diferencias, pero vamos a centrarnos en los conceptos básicos primero. Aquí hay varios detalles a destacar:

• 1️⃣ Hemos establecido un color gris por defecto. Volveremos a esto más adelante.
• 2️⃣ Hemos definido una animación llamada change-color que durará 5 segundos.
• 3️⃣ En la regla @keyframes hemos indicado que la animación parte de color red a color green.
• 4️⃣ La animación se ha iniciado automáticamente, sin realizar ninguna acción.

Visualmente, vemos que el cuadrado aparece en color rojo y va cambiando gradualmente a color verde, una vez terminan los 5 segundos de la animación, vuelve a su color gris inicial (la animación ha terminado).

Crear una Animación en CSS es tan sencillo como esto. En el siguiente artículo veremos como definir más estados, hacer que la animación se repita un número de veces, repetirla de forma infinita, etc...

Animaciones múltiples

Como en muchas propiedades de CSS, es posible separar sus valores mediante comas para indicar múltiples valores. En este caso, esos multiples valores indicarán que queremos realizar varias animaciones a la vez.

Observa el siguiente ejemplo, donde indicamos que tanto la animación move-right como la animación change-color deben empezar a la vez. Cada una de ellas durará 5 segundos:

.element {
  animation:
    move-right 5s,
    change-color 5s;
}

Sin embargo, en este momento puede parecer algo no muy útil, ya que podemos pensar que convendría más añadir los estilos en una sola animación para hacerlo más simple. Es cierto, sin embargo, podemos añadir la propiedad animation-delay a este ejemplo, para hacerlo más interesante, como veremos a continuación.

Encadenar animaciones

Es posible encadenar animaciones utilizando animaciones múltiples combinadas con la propiedad animation-delay.

Observa el siguiente ejemplo donde se verá mucho mejor. El primer valor de tiempo es la duración de la animación, el segundo valor de tiempo es el tiempo que tarda en iniciarse la animación:

.element {
  animation:
    move-right 5s 0s,   /* Comienza a los 0s (no hay anterior) */
    look-up 2.5s 5s,    /* Comienza a los 5s (5 de la anterior) */
    move-left 5s 7.5s,  /* Comienza a los 7.5s (5 + 2.5 de la anterior) */
    dissapear 2s 9.5s;  /* Comienza a los 9.5s (5 + 2.5 + 2 de la anterior) */
}

• 1️⃣ La primera animación move-right comienza a los 0 segundos y dura 5 segundos.
• 2️⃣ La segunda animación look-up comienza a los 5 segundos y dura 2.5 segundos.
• 3️⃣ La tercera animación move-left comienza a los 7.5 segundos y dura 5 segundos.
• 4️⃣ La cuarta animación dissapear comienza a los 9.5 segundos y dura 2 segundos.

En este caso, lo que hemos hecho es aplicar varias animaciones a la vez, pero estableciendo un retardo (cuarto parámetro) que es la suma de la duración de las animaciones anteriores. De esta forma, lo que estamos haciendo es encadenar una animación con otra.