Укажите, как несколько эффектов анимации должны объединяться с помощью анимации-композиции.

Заменить, добавить или накопить? Вот в чем вопрос.

Bramus

Объединение нескольких анимационных эффектов

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

Поддержка браузера

• 112
• 112
• 115
• 16

Источник

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

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) . Это переместит блок на 50 пикселей, затем повернет его на 45 градусов, а затем переместит на 100 пикселей.

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

Фото Алекса Бойда на Unsplash