Управление бесконечными CSS-анимациями на лету 🕹
Как animation-composition: add позволяет менять скорость и направление бесконечных анимаций без скачков и JavaScript.
Если вы пробовали динамически менять скорость бесконечной CSS-анимации (например, ускорять вращение при ховере, просто меняя animation-duration), то знаете главную боль: элемент неприятно «прыгает» на случайную позицию. Чтобы сделать всё гладко, обычно приходится прикручивать JavaScript.
В блоге Frontend Masters вышла отличная статья о том, как изящно решить эту проблему на чистом CSS.
Главный инструмент здесь — свойство animation-composition: add.
Вместо того чтобы менять параметры текущей анимации, мы вешаем на элемент сразу две одинаковые. Первая работает постоянно, а вторая висит на паузе (paused). При наведении мы снимаем вторую с паузы, и благодаря composition: add их значения складываются.
Дальше в дело вступает математика на CSS-переменных и calc(). Задав нужный фактор скорости, можно:
- кратно ускорять или замедлять анимацию;
- полностью её останавливать;
- разворачивать движение в обратную сторону (с помощью отрицательных значений).
В итоге: Никакого «дёрганого» UI и пересчетов в JS — всё работает силами движка браузера. Подход идеально подойдет для интерактивных лоадеров, сложных фоновых эффектов или бесконечных бегущих строк (каруселей), которые реагируют на действия пользователя.