Especificar como vários efeitos de animação devem ser compostos com a composição da animação

Substituir, adicionar ou acumular? Essa é a questão.

Bramus

Combinar vários efeitos de animação

A propriedade animation-composition permite controlar o que acontece quando várias animações afetam a mesma propriedade simultaneamente.

Suponha que você tenha esta transformação de base aplicada a um elemento:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

E que você também tem 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 atual. Esse é o comportamento padrão.

Com animation-composition, você agora tem controle sobre o que deve acontecer em vez do 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 acumulação é sutil. Por exemplo, considere os dois valores blur(2) e blur(3). Quando adicionados, eles produzem blur(2) blur(3), mas quando acumulados, produzem blur(5).

Você pode comparar isso com uma xícara cheia de chá. Ao colocar leite, isso aconteceria:

• 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, eles se misturam bem.

Demonstração

Na demonstração abaixo, há três caixas cinzas com as bases transform e animation aplicadas.

Embora essas caixas tenham a mesma animação, elas geram um resultado diferente porque têm um conjunto animation-composition diferente:

A primeira caixa está definida como animation-composition: replace. Esse é o comportamento padrão. Na posição final, o valor original de translateX(50px) rotate(45deg) para transform é simplesmente substituído por translateX(100px).

A segunda caixa está 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, gira em 45 graus e move em 100 px.

A terceira caixa está definida como animation-composition: accumulate. Na posição final, o translateX(100px) será adicionado matematicamente ao translateX(50px) da transformação original, resultando em uma transformação de translateX(150px) rotate(45deg).

Foto de Alex Boyd no Unsplash (links em inglês).