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