Урок 42. Задания: Анимации и переходы: transition и @keyframes

📁 Раздел: Современный CSS ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#transition #transition-property #transition-duration #transition-timing-function #transition-delay #cubic-bezier #steps #keyframes #animation #animation-name #animation-duration #animation-timing-function #animation-iteration-count #animation-fill-mode #animation-delay #animation-direction #transform #opacity #media

⚡ Кратко

`transition` плавно меняет свойства между состояниями, а `@keyframes` описывает самостоятельную анимацию. Разбираем duration, easing, iteration, fill-mode, производительные `transform`/`opacity` и `prefers-reduced-motion`.

Задания

Создайте файл с разметкой из примеров урока и выполните задания по порядку. Проверяйте результат в браузере наведением курсора и перезагрузкой страницы.

  1. Кнопка с переходом. Сделайте кнопку, которая при :hover приподнимается (transform: translateY(-3px)) и темнеет. Переход — transform и background-color за 180ms с ease. Объявите transition на базовом селекторе, а не в :hover.
    Ожидаемо: при наведении кнопка плавно поднимается, при уходе курсора плавно опускается обратно.
  2. Сравнение кривых. Сделайте три одинаковых блока с переходом transform за .4s и разными transition-timing-function: linear, ease, ease-in-out. Наведите на все три и заметьте разницу в характере движения.
  3. Появление через @keyframes. Опишите @keyframes fade-up (от opacity:0; translateY(1rem) к opacity:1; translateY(0)) и примените к карточке: animation: fade-up 500ms ease-out both.
    Ожидаемо: при загрузке страницы карточка всплывает снизу и проявляется.
  4. Пульс по кадрам. Сделайте круглый индикатор с @keyframes pulse (0% scale(1) → 50% scale(1.25) → 100% scale(1)) и бесконечным повтором animation: pulse 1s ease-in-out infinite.
  5. Доступность. Добавьте медиазапрос prefers-reduced-motion: reduce, который сводит длительности переходов и анимаций почти к нулю. Проверьте, включив эмуляцию в DevTools (Rendering).

Навигация