Урок 14. Старый vs Новый: ключевые кадры против утилит

📁 Раздел: Состояния и темы ⏱️ Время изучения: ~45 мин 🎯 Сложность: Средняя

⚡ Кратко

Раньше каждая анимация означала новое правило и новые ключевые кадры. Теперь типовое движение — это классы, а собственные кадры регистрируются в теме и становятся утилитой.

Наведение на карточку

❌ Отдельные правила

.card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
}

✅ Классы на элементе

<a class="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">…</a>

Индикатор загрузки

❌ Свои ключевые кадры под каждый спиннер

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }

✅ Готовый класс

<span class="size-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-900"></span>

Что изменилось в v4

Задача	v3	v4
Своя анимация	`theme.extend.animation` и `keyframes` в конфиге	`--animate-*` в `@theme` + обычный `@keyframes`
Трансформации	нужен класс `transform`	работают сразу
Анимация появления	только через JavaScript	вариант `starting:`
Кривые	`ease-*` из конфига	`--ease-*` в теме
3D-трансформации	ограниченно	`rotate-x-`, `perspective-`

Отдельно стоит знать про пакет tw-animate-css: его ставит shadcn/ui для анимаций открытия и закрытия оверлеев (animate-in, fade-in, slide-in-from-top). Разберём в уроке 21.