Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему.
Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://t.me/htmlshit/806), только теперь в анимации.
Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация!
Есть два способа это обойти:
1. Использовать
filter: hue-rotate(), чтобы прокручивать оттенки напрямую.2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.
В итоге получается ровная и предсказуемая смена цвета без серых провалов.
Статья: https://www.joshwcomeau.com/animation/color-shifting/
#css #color #animation