Especificar cómo se deben componer varios efectos de animación con la composición de animación

¿Reemplazar, agregar o acumular? Esa es la pregunta.

Bramus

Combinación de varios efectos de animación

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 base 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, sucede 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 siguiente demostración, hay tres cuadros grises que tienen aplicados ese transform y animation básicos.

Aunque estas casillas tienen la misma animación, producen 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 simplemente por translateX(100px).

El segundo cuadro está configurado en 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 está configurada como 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).

Foto de Alex Boyd en Unsplash