#новость дня

Итак, всем знакомая проблема: назначили два вида transform-преобразований, например, translate и rotate и пошли делать анимацию на ключевых кадрах.

А в анимации указали только translate. И бум — никакого вам поворота. Вот так.

А все дело в том, что в CSS до недавнего времени не существовало понятия композиции анимаций и преобразований. А теперь есть! Так и называется: animation-composition. И значения add, replace и accumulate.

Подробнее и примеры в блоге разработчиков Chrome. Вот кодпен с демо: https://codepen.io/web-dot-dev/pen/VwGRBVX

Я больше вам скажу, вчера вышел Firefox 115, который начал поддерживать композицию из коробки! Так что можно сказать — пора.

#animate #transform #composition