Combina varios efectos de animación con animation-composition

Bramus

La propiedad animation-composition permite controlar lo que debe suceder cuando varias animaciones afectan la misma propiedad de forma simultánea.

Supongamos que tienes esta transformación básica aplicada a un elemento:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

Y que también tienes este conjunto de fotogramas clave:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

Cuando se aplican estos fotogramas clave a un elemento, el transform del fotograma clave to reemplaza el transform existente. Este es el comportamiento predeterminado.

Con animation-composition, ahora tienes control sobre lo que debería suceder en lugar de la replace predeterminada. Valores aceptados:

• replace: El valor del efecto reemplaza el valor subyacente. (predeterminado)
• add: El valor del efecto se agrega al valor subyacente.
• accumulate: El valor del efecto se combina con el valor subyacente.

La diferencia entre la adición y la acumulación es sutil. Por ejemplo, toma los dos valores blur(2) y blur(3). Cuando se suman, producen blur(2) blur(3), pero, cuando se acumulan, producen blur(5).

Podrías comparar esto con una taza llena de té. Cuando viertes leche en él, ocurre lo siguiente:

• replace: Se quita el té y se lo reemplaza por la leche.
• add: La leche se agrega a la taza, pero permanece en capas sobre el té.
• accumulate: La leche se agrega al té y, como ambos son líquidos, se mezclan bien.

Demostración

En la demostración, hay tres cuadros grises que tienen aplicadas esas bases transform y animation.

Aunque estas casillas tienen la misma animación, arrojan un resultado diferente porque tienen un conjunto de animation-composition diferente:

El primer cuadro está configurado en animation-composition: replace. Este es el comportamiento predeterminado. En su posición final, el valor original de translateX(50px) rotate(45deg) para transform se reemplaza por translateX(100px).

El segundo cuadro está configurado como animation-composition: add. En su posición final, el translateX(100px) se agrega al translateX(50px) rotate(45deg) original, lo que da como resultado translateX(50px) rotate(45deg) translateX(100px). Esto mueve la caja 50 px, luego la gira 45 grados y, por último, la mueve 100 px.

La tercera caja se establece en animation-composition: accumulate. En su posición final, el translateX(100px) se sumará matemáticamente al translateX(50px) de la transformación original, lo que generará una transformación de translateX(150px) rotate(45deg).