Будни разработчика: блог лид JS

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