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

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

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

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

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