Урок 14. Переходы, трансформации, анимации

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

⚡ Кратко

Плавность добавляется тремя классами: transition (что анимировать), duration-200 (как долго), ease-out (с каким ускорением). Движение задают трансформации: scale-105, translate-x-1, rotate-180. Готовые анимации — animate-spin, animate-pulse, свои — через --animate-* в теме.

О чём этот урок

Анимация в интерфейсе — не украшение, а способ объяснить изменение: куда уехал элемент, что загружается, какое действие сработало. Разберём переходы между состояниями, трансформации, встроенные и собственные анимации, а также обязательное правило — уважать настройку «уменьшить движение».

Структура урока

Теория

Переходы, кривые, трансформации, производительность.

Справочник

Классы transition, transform, animate.

Примеры

Кнопки, карточки, скелетоны, спиннеры, появление.

Старый vs Новый

Ключевые кадры в CSS против утилит.

Задания

Добавить движение к готовым компонентам.

Решения

Разбор с живым результатом.

Ошибки

Долгие анимации, дёргающиеся свойства, игнор prefers-reduced-motion.

Домашнее задание

Оживить интерфейс проекта.

Ресурсы

Документация и статьи о движении.

Практика

  • Добавьте кнопке плавную смену цвета и лёгкое «нажатие».
  • Сделайте скелетон загрузки на animate-pulse.
  • Проверьте интерфейс с включённой настройкой «уменьшить движение».

Навигация