Заменить, добавить или накопить? Вот в чем вопрос.
Объединение нескольких анимационных эффектов
Свойство 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