🎞️ Keyframes-токены: как навести порядок в анимациях проекта
Разработчик Амит Шин написал о проблеме, которую он встречает на каждом новом проекте. В коде разбросаны десятки определений одних и тех же анимаций: несколько fade-in, пара slide, несколько spin. Разработчики пишут их заново, не зная, что похожие уже есть где-то рядом.
Главная ловушка в том, что keyframes всегда глобальны. Даже в компонентной архитектуре последнее определение с таким именем перезаписывает все предыдущие. Локально всё работает, а на продакшене анимации ломаются из-за порядка загрузки стилей. Решение: единый файл с переиспользуемыми keyframes, которые настраиваются через CSS-переменные.
Внутри:
– Почему keyframes дублируются в каждом проекте;
– Как глобальная область видимости ломает анимации;
– Динамические slide и zoom через CSS-переменные;
– Комбинирование анимаций и animation-composition;
– Поддержка prefers-reduced-motion из коробки.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
