Урок 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) при загрузке плавно всплывает снизу через @keyframes, (2) приподнимается с тенью при :hover/:focus-within через transition, и (3) уважает prefers-reduced-motion: reduce.

Ожидаемый результат

Товар

Карточка всплывает при загрузке и поднимается при наведении.

В корзину 
<article class="product">
  <div class="product__cover"></div>
  <h3>Товар</h3>
  <p>Описание...</p>
  <a class="product__btn" href="#">В корзину</a>
</article>
1

Соберите HTML

Семантическая <article> с обложкой, заголовком, текстом и кнопкой-ссылкой.

2

transition на состояния

Объявите transition: transform 200ms ease, box-shadow 200ms ease; на .product (базовый селектор!), а сдвиг и тень — в .product:hover, .product:focus-within.

3

@keyframes для появления

Опишите @keyframes fade-up (opacity 0→1, translateY(1rem)→0) и примените animation: fade-up 500ms ease-out both;.

4

Доступность

Добавьте @media (prefers-reduced-motion: reduce), сводящий длительности к 0.01ms.

5

Проверьте

Перезагрузите страницу (видно всплытие), наведите курсор и пройдите по карточке клавишей Tab (видна реакция), включите эмуляцию reduce-motion в DevTools → Rendering.

Связь с уроком: приёмы — из разделов «Теория» и «Примеры»; типичные ошибки разобраны в «Ошибки».

Навигация