¿Deseas reemplazar, agregar o acumular? Esa es la pregunta.
Cómo combinar varios efectos de animación
La propiedad animation-composition permite controlar lo que debe suceder cuando varias animaciones afectan la misma propiedad de manera simultánea.
Supongamos que tienes esta transformación base aplicada a un elemento:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
Además, tienes el siguiente conjunto de fotogramas clave:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Cuando se aplican estos fotogramas clave a un elemento, la transform del fotograma clave to reemplaza el transform existente. Este es el comportamiento predeterminado.
Con animation-composition, ahora tienes el control de lo que debe 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 suma y la acumulación es sutil. Por ejemplo, toma los dos valores blur(2) y blur(3). Si se suman, se produciría blur(2) blur(3), pero cuando se acumulen, se produciría blur(5).
Podrías comparar esto con una taza llena de té. Al verter leche en ella, sucede lo siguiente:
replace: Se quita el té y se reemplaza con 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 fluidos, se mezclan muy bien.
Demostración
En la siguiente demostración, hay tres cuadros grises que tienen esos valores base transform y animation aplicados.
Aunque estos cuadros tienen la misma animación, producen un resultado diferente porque tienen un conjunto de animation-composition diferente:
El primer cuadro se establece en animation-composition: replace. Este es el comportamiento predeterminado. En su posición final, el valor translateX(50px) rotate(45deg) original de transform simplemente se reemplaza por translateX(100px).
La segunda caja se establece en animation-composition: add. En su posición de finalización, el translateX(100px) se agrega a la translateX(50px) rotate(45deg) original, lo que genera translateX(50px) rotate(45deg) translateX(100px). Se mueve el cuadro 50 px, luego lo convierte en 45 px y, luego, 100 px.
El tercer cuadro está configurado en animation-composition: accumulate. En su posición final, se agregará matemáticamente translateX(100px) a translateX(50px) desde la transformación original, lo que dará como resultado una transformación de translateX(150px) rotate(45deg).