�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).