Минутка обложки:

Про тревожность и терапию.
Изображение поста

🎞️ Keyframes-токены: как навести порядок в анимациях проекта

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