Токены ключевых кадров: Стандартизация анимации в проектах

Анимации могут быть одной из самых приятных частей создания интерфейсов, но без надлежащей структуры они быстро становятся источником путаницы и разочарования. Распространенная проблема — дублирование множества определений @keyframes для схожих эффектов, таких как плавное появление (fade-in) или скольжение (slide), разбросанных по всему проекту. Это приводит к напрасной трате времени разработчиков, раздуванию кодовой базы и значительно усложняет обслуживание, поскольку каждое изменение требует обновления множества мест.

Ещё более серьезная проблема заключается в том, что @keyframes всегда определяются в глобальной области видимости CSS. Это означает, что анимации с одинаковыми именами могут перезаписывать друг друга, приводя к непредсказуемому поведению, особенно в производственной среде, где порядок загрузки стилей может меняться.

/* Эта анимация будет переопределена следующей */
@keyframes pulse {
  from { scale: 1; }
  to { scale: 1.1; }
} 

/* Эта анимация применится к обоим компонентам с именем 'pulse' */
@keyframes pulse {
  0%, 20%, 100% { scale: 1; }
  10%, 40% { scale: 1.2; }
}

Решение состоит в стандартизации и централизации определений @keyframes, рассматривая их как "токены ключевых кадров", подобно токенам для цветов или отступов. Эти токены хранятся в едином файле стилей (например, kf-tokens.css) и используют префиксы, такие как kf-, для предотвращения конфликтов имен. Ключевая особенность этих токенов — их динамичность и настраиваемость с помощью кастомных CSS-свойств, что позволяет адаптировать анимации без создания новых @keyframes.

Например, для универсальной анимации скольжения kf-slide-in можно задать направление с помощью свойства --kf-slide-from:

@keyframes kf-slide-in {
  from { translate: var(--kf-slide-from, -100% 0); }
  to { translate: 0 0; }
}

.notification {
  animation: kf-slide-in 0.4s ease-out;
  --kf-slide-from: 0 -50px; /* скольжение сверху */
}

Таким образом, один kf-zoom может управлять масштабированием, а kf-spin — вращением, гибко настраиваясь через кастомные свойства. Комбинирование анимаций, воздействующих на разные свойства (например, opacity и transform), происходит естественно. Однако, если две анимации влияют на одно и то же свойство, необходимо использовать animation-composition: add, чтобы эффекты сочетались, а не перекрывали друг друга.

.component-two {
  animation-composition: add; /* Объединяет анимации, затрагивающие одно свойство */
  animation:
    kf-zoom 0.5s forwards,
    kf-pulse 1.2s infinite alternate;
  --kf-zoom-from: 0.5;
  --kf-zoom-to: 1.2;
  --kf-pulse-scale-from: 0.8;
  --kf-pulse-scale-to: 1.1;
}

Важный аспект — это доступность: для пользователей с предпочтениями уменьшенного движения (prefers-reduced-motion) можно полностью отключать, мгновенно завершать или смягчать анимации прямо внутри токенов. Стратегии внедрения включают постепенное освоение, последовательное именование, тщательную документацию и обеспечение разумной гибкости через пользовательские свойства.

Внедрение токенов ключевых кадров превращает анимации из разрозненного набора приемов в структурированную, предсказуемую и поддерживаемую часть дизайн-языка продукта, повышая его согласованность и качество.

Оригинал статьи: Keyframes Tokens: Standardizing Animation Across Projects