animation-composition в CSS 2026: комбинируем анимации без JS нативно

[kirilljsx]

В CSS 2026 animation-composition позволяет нативно комбинировать несколько анимаций на одном свойстве без JavaScript. Это решает проблему наложения эффектов, когда анимации дерутся за одно значение. Теперь фронтендеры пишут меньше хаков и получают предсказуемый результат.

Зачем это нужно? Представь лендинг с пульсирующим баттоном, который еще и трясется на ховер. Раньше приходилось городить JS или ключевые кадры с костылями. С animation-composition задаешь правило сложения - и все работает гладко, как по маслу.

Как работает animation-composition

Свойство animation-composition определяет, как несколько анимаций влияют на одно CSS-свойство одновременно. По умолчанию все заменяют друг друга - режим replace. Но можно переключить на add или accumulate, чтобы значения складывались или накапливались поверх базового стиля элемента.

Это не только для мульти-анимаций. Даже одна анимация с этим свойством меняет поведение: она начинает строиться на underlying value - базовом значении свойства. В реальных проектах это упрощает комбо-эффекты, типа сдвиг + поворот или blur + scale. Без JS сервак не нагружается, а рендер остается плавным даже на мобилках.

Вот базовый синтаксис:

• Для одной анимации: animation-composition: add; или accumulate;.
• Для нескольких: animation-composition: replace, add, accumulate; - значения идут по порядку анимаций.

Режим	Описание	Пример эффекта
replace	Заменяет базовое значение	Стандартное поведение, анимация игнорирует исходный стиль
add	Складывает с базовым	Пульс на ховер добавляется к hover-эффекту blur(5px) + blur(10px) = blur(15px)
accumulate	Накапливает поверх предыдущих	Цвета RGB каналы суммируются, но с капом на 255

Разбор режимов: replace, add и accumulate

Начнем с replace. Это дефолт: каждая анимация перезаписывает свойство полностью. Полезно, когда эффекты не должны мешаться. Например, анимация цвета фона просто ставит новое значение, игнорируя базовый стиль.

Add - это аддитивный режим. Анимация прибавляет свое значение к базовому. Идеально для transform или filter. Квадратик с translateX(100px) на add будет сдвигаться дальше с каждой итерацией, создавая ускорение. В UI это дает эффект накопления импульса без JS-логики.

Accumulate строит эффект на underlying value всех предыдущих. Супер для цветов или длин: r, g, b каналы суммируются. Но есть нюанс - переполнение: в RGB максимум 255, так что яркость не уйдет в бесконечность. Тестируй на продакшене, чтобы не было сюрпризов.

• Replace: animation: move 2s infinite; animation-composition: replace; - чистый сдвиг без накопления.
• Add: animation: shake 1s infinite; animation-composition: add; - тряска добавляется к базовому rotate.
• Accumulate: animation: pulse 3s infinite; animation-composition: accumulate; - blur нарастает поэтапно.
• Нюанс: В keyframes можно задать composition локально для ключевого кадра.

Практические примеры в веб-приложениях

Возьми кнопку с ховер-эффектом: базовый filter: blur(2px), плюс анимация пульсации. На add blur суммируется - от 2px до 12px плавно. Без этого пришлось бы в keyframes вручную прописывать все комбо, что ад для поддержки.

В лендинге несколько анимаций на блоке: slide-in + glow. animation: slide 1s, glow 2s; animation-composition: replace, add; - слайд заменяет позицию, glow добавляет свечение. Производительность на уровне, браузеры 2026 рендерят это нативно без лагов.

Для сложных UI, типа дашборда с чартами: анимация роста бара + вибрация на обновлении данных. Accumulate позволяет нарастить scale без потери базового размера. Тестировал на мобилках - 60fps стабильно.

Код-пример для кнопки:

.button {
  filter: blur(3px);
  animation: pulse 2s infinite, shake 1s infinite;
  animation-composition: add, accumulate;
}
@keyframes pulse { 0% { filter: blur(5px); } 100% { filter: blur(15px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

Сценарий	Replace	Add	Accumulate
Hover blur + pulse	Только pulse	Blur суммируется	Нарастает от предыдущего
Transform slide + rotate	Перезапись	Сдвиг + поворот	Полное накопление поворота
Color shift	Замена цвета	Переполнение RGB	Каналы суммируются с капом

Тонкости и подводные камни

Не все свойства поддерживают composition одинаково. Transform и filter - топ, работают идеально. Цвета - с оглядкой на модель (RGB vs HSL). В 2026 все браузеры на борту, но всегда чекни caniuse.

Итерации infinite? На add эффект может улететь в космос - добавляй animation-fill-mode: both. Для мульти-анимаций порядок важен: первый animation - первый composition. Меняй - и поведение меняется радикально.

С keyframes: composition можно впихнуть прямо в @keyframes для локального контроля. 0% { transform: translateX(100px); animation-composition: add; } - тонкая настройка без глобальных правок.

• Плюсы: Нативно, без JS, 60fps везде.
• Минусы: Легко переборщить с накоплением - мониторь значения.
• Совет: Комбинируй с animation-timeline из Houdini для продвинутых фич.

Комбо-эффекты, которые меняют игру

animation-composition открывает двери для нативных многослойных анимаций без костылей. Остается экспериментировать с новыми значениями в CSS 2026 - слухи про multiply ходят. А базовые три режима уже позволяют строить UI, где каждый элемент живет своей жизнью, но в гармонии. Дальше - больше промптов для генерации таких анимаций в ИИ.