animation-composition теперь работает везде: контроль CSS-анимаций без JS

hannadev

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

Это решает проблему перезаписи анимаций. Раньше при hover или фокусе новая анимация стирала старую. С animation-composition эффекты складываются, как слои в Photoshop. Полезно для UI-элементов: кнопки оживают, градиенты крутятся бесконечно, а hover добавляет акцент - всё гладко и производительно.

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

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

Представьте кнопку с постоянной анимацией вращения градиента. При hover добавляется сдвиг угла - без JS. Браузер просто накладывает вторую анимацию поверх первой. Это работает для transform, filter, background и даже цветов. Поддержка появилась в 2025-2026 годах, и теперь Chrome, Firefox, Safari на равных.

В реальном примере: conic-gradient крутится бесконечно, hover ускоряет его. Без composition вторая анимация убивает первую. С add они складываются - GPU не нагружается, мобильные устройства не страдают от лагов. Логично перейти к значениям свойства.

replace: Новая анимация перезаписывает старую (по умолчанию). Подходит для простых случаев, где не нужен стек эффектов.
add: Эффекты суммируются с базовым значением. Идеально для transform и filter - например, поворот + размытие.
accumulate: Анимации складываются друг с другом. Полезно для нескольких слоёв, как градиент + свечение.

Режим	Описание	Пример эффекта
replace	Замена	Hover стирает spin
add	Сумма с базой	Spin + hover-shift
accumulate	Сумма анимаций	Несколько градиентов слоями

Практические примеры наложения анимаций

Возьмём кнопку с коническим градиентом, который вращается по часовой стрелке. CSS-анимация на angle градиента бесконечная. При hover запускается вторая анимация - смещение угла для блика. Без composition hover прерывает вращение.

С animation-composition: add браузер добавляет вторую анимацию к первой. Результат: градиент вертится, а hover накладывает вспышку. Это использует custom properties для динамики - --angle: 0deg, анимация меняет его. Производительность на высоте, так как анимации паузированы до взаимодействия.

Ещё пример с фильтрами: иконка с постоянным pulse (размытие от 10px до 20px). Hover добавляет blur(5px). В replace-режиме pulse исчезает, в add - суммируется. Реальные кнопки в UI получают глубину без JS-слушателей. Теперь разберём код.

button {
  background: conic-gradient(from var(--angle), yellow, orange);
  animation: spin 10s linear infinite;
  animation-composition: add;
}

button:hover {
  animation: shift 0.5s ease;
  animation-composition: add;
}

@keyframes spin { to { --angle: 360deg; } }
@keyframes shift { 50% { --angle: 180deg; } }

Используйте для кнопок: бесконечный фон + hover-эффект.
Для иконок: базовый glow + интерактивный blur.
Нюанс: Работает с logical properties для RTL-языков.

Сценарий	Без composition	С add/accumulate
Кнопка hover	Анимация сбрасывается	Эффектыются
Множественные градиенты	Только последний	Все слои видны
Filter pulse	Hover ломает цикл	Сумма blur-уровней

Сравнение с JavaScript-решениями

Раньше для стека анимаций использовали JS: event listeners, requestAnimationFrame или библиотеки вроде GSAP. Это добавляло вес, лагало на мобильных и требовало отладки. animation-composition упрощает: один CSS-класс управляет всем.

В примере с видео: кнопка с градиентами, pseudo-элементами и hover - 100% CSS. JS заменили на composition: add. Результат чище, быстрее рендерится. Поддержка в 2026 году полная - забудьте полифиллы. Но учтите: для сложной логики JS всё равно нужен.

Сравним производительность: CSS-анимации на GPU, JS - на CPU. Composition добавляет zero overhead. Реальные кейсы - анимированные бордеры без SVG, staggered эффекты без циклов. Логично к преимуществам.

Производительность: Меньше нагрузки, пауза до hover.
Простота: Нет кода, только CSS.
Кросс-браузер: Теперь везде.

Подход	Вес	Сложность	GPU-поддержка
JavaScript	Высокий	Средняя	Нет
CSS + composition	Низкий	Низкая	Да

Новые горизонты для CSS-анимаций

Свойство открывает двери для scroll-driven анимаций и sibling-based эффектов, но фокус на composition. Осталось экспериментировать с цветами: анимации rgb суммируются в неожиданные оттенки. Подумать стоит над комбо с @property для сверхгладких переходов.

В 2026 CSS догоняет JS по мощи. Кнопки, меню, градиенты - всё без скриптов. За кадром комбинации с view() timeline, но базовое освоение даст преимущество в UI.