Substituir, adicionar ou acumular? Essa � a pergunta.
Combinar v�rios efeitos de anima��o
A propriedade animation-composition permite controlar o que vai acontecer quando v�rias anima��es afetarem a mesma propriedade simultaneamente.
Digamos que voc� tenha esta transforma��o de base aplicada a um elemento:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
E que temos tamb�m este conjunto de frames-chave:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Ao aplicar esses frames-chave a um elemento, o transform no frame-chave to substitui o transform existente. Esse � o comportamento padr�o.
Com animation-composition, agora voc� tem controle sobre o que vai acontecer em vez de replace padr�o. Os valores aceitos s�o:
replace: o valor do efeito substitui o valor subjacente. (padr�o)add: o valor do efeito � adicionado ao valor subjacente.accumulate: o valor do efeito � combinado com o valor subjacente.
A diferen�a entre adi��o e ac�mulo � sutil. Por exemplo, use os dois valores blur(2) e blur(3). Quando somado, isso produziria blur(2) blur(3), mas, quando acumulado, isso produziria blur(5).
Voc� pode comparar isso com uma x�cara cheia de ch�. Ao colocar leite nele, acontece o seguinte:
replace: o ch� � removido e substitu�do pelo leite.add: o leite � adicionado � x�cara, mas permanece em camadas sobre o ch�.accumulate: o leite � adicionado ao ch� e, como ambos s�o fluidos, se misturam bem.
Demonstra��o
Na demonstra��o abaixo, h� tr�s caixas cinza com essa base, transform e animation.
Mesmo que essas caixas tenham a mesma anima��o, elas geram um resultado diferente porque t�m um conjunto de animation-composition diferente:
A primeira caixa � definida como animation-composition: replace. Esse � o comportamento padr�o. Na posi��o final, o valor translateX(50px) rotate(45deg) original para transform � simplesmente substitu�do por translateX(100px).
A segunda caixa � definida como animation-composition: add. Na posi��o final, o translateX(100px) � adicionado ao translateX(50px) rotate(45deg) original, resultando em translateX(50px) rotate(45deg) translateX(100px). Isso move a caixa em 50 px, depois muda a 45� e a move em 100 px.
A terceira caixa � definida como animation-composition: accumulate. Na posi��o final, o translateX(100px) vai ser adicionado matematicamente � translateX(50px) da transforma��o original, resultando em uma transforma��o de translateX(150px) rotate(45deg).