Сочетайте несколько анимационных эффектов с помощью композиции анимации.

Bramus

Свойство animation-composition позволяет управлять тем, что должно происходить, когда несколько анимаций одновременно влияют на одно и то же свойство.

Допустим, к элементу применено следующее базовое преобразование:

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

И у вас также есть этот набор ключевых кадров:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

При применении этих ключевых кадров к элементу transform в to кадре заменяет существующее transform . Это поведение по умолчанию.

С помощью animation-composition вы теперь можете контролировать происходящее вместо стандартной replace . Допустимые значения:

• replace : Значение эффекта заменяет базовое значение. (по умолчанию)
• add : Значение эффекта добавляется к базовому значению.
• accumulate : значение эффекта объединяется с базовым значением.

Разница между сложением и накоплением невелика. Например, возьмем два значения blur(2) и blur(3) . При сложении это даст blur(2) blur(3) , а при накоплении — blur(5) .

Это можно сравнить с чашкой, наполненной чаем. Когда в неё наливают молоко, происходит следующее:

• replace : Чай убирают, и вместо него добавляют молоко.
• add : Молоко добавляется в чашку, но оно остается слоем поверх чая.
• accumulate : В чай добавляют молоко, и, поскольку это жидкости, они хорошо смешиваются.

Демо

В демонстрации показаны три серых прямоугольника, к которым применены базовое transform и animation .

Несмотря на то, что эти блоки имеют одинаковую анимацию, результат получается разным, поскольку у них разные наборы animation-composition :

Для первого блока установлено значение animation-composition: replace . Это поведение по умолчанию. В его конечной позиции исходное значение translateX(50px) rotate(45deg) для transform заменяется на translateX(100px) .

Для второго блока задана animation-composition: add . В его конечной позиции к исходному значению translateX(100px) translateX(50px) rotate(45deg) translateX(50px) rotate(45deg) translateX(100px) . Это перемещает блок на 50px, затем поворачивает его на 45deg, а затем перемещает на 100px.

Третий блок имеет параметр animation-composition: accumulate . В его конечной позиции значение translateX(100px) будет математически прибавлено к значению translateX(50px) из исходного преобразования, в результате чего получится преобразование translateX(150px) rotate(45deg) .