Composición de animaciones

En algunas situaciones, puede ser que utilicemos múltiples animaciones pero estemos buscando cambiar la forma en la que se «mezclan» las animaciones, para poder reutilizarlas y no tener que volver a crear una animación nueva. En ese caso, lo que nos interesa es hacer Composición de animaciones.

La propiedad animation-composition

Mediante la propiedad animation-composition, en un elemento que contiene múltiples animaciones separadas por coma, podemos indicarle al navegador como se van a aplicar dichas animaciones por parte del navegador.

Para ello, utilizaremos la propiedad CSS animation-composition, que puede tomar los valores replace (por defecto), add o accumulate. Estos valores tienen la siguiente funcionalidad:

Ejemplo inicial (con replace)

Pero para ver esto más claro, lo mejor es aplicar un ejemplo y entender su funcionamiento. Observa el siguiente fragmento de código. En él encontrarás un cuadrado con las siguientes características:

• Inicialmente, su color es gris
• La animación move se repite cada 3s desde el segundo 0 de la animación.
• La animación rotate se repite cada 3s desde el segundo 3 de la animación.
• Es decir, desde la segunda iteración, ambas animaciones coinciden.
• Observa que cada animación tiene un color diferente.

.element {
  width: 100px;
  height: 100px;
  background: grey;
  animation:
    move 3s infinite 0s,
    rotate 3s infinite 3s;
}


@keyframes move {
  to {
    transform: translateX(500px);
    background: red;
  }
}


@keyframes rotate {
  to {
    transform: rotate(360deg) scale(0.5);
    background: indigo;
  }
}

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

Ahora, analicemos las animaciones:

• La animación move traslada el elemento 500px a la derecha y cambia a rojo.
• A partir de la segunda iteración, comienza a aplicarse también la animación rotate.
• Aunque en cada iteración, comienza en gris y va cambiando a rojo, la animación rotate va reemplazando la animación.

Ejemplo completo

Ahora observemos como se comporta según el valor que apliquemos de animation-composition. Nos centraremos en las iteraciones finales donde se aplican tanto move como rotate:

• Con el valor replace la animación comienza trasladándose como dicta move, pero a mitad de cambio es reemplazada por rotate. Observa que se aprecia ligeramente el cambio a rojo que termina modificandose por lila.

• Con el valor add notamos que los colores se mezclan (gris + rojo + lila) y no se reemplazan. Por otro lado, en este caso las animaciones se han sumado, el trayecto de translateX() se hace completo, al igual que el rotate() y el scale().

• Con el valor accumulate pasa igual con los colores, sin embargo, con las animaciones en este caso no se aplica la rotación, ya que en la primera animación no existe rotate().

Ten en cuenta que en el caso de translate() y scale(), los valores iniciales aunque no están indicados se infieren por parte del navegador, ya que un elemento sin trasladar es equivalente a translate(0, 0) y un elemento sin escalar es equivalente a scale(1). No ocurre lo mismo con la rotación rotate().

En el caso de querer aplicar composiciones diferentes por cada animación, separaremos por coma, como solemos hacer habitualmente.