Урок 42. Старый vs Новый: Анимации и переходы: 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`.

Тема урока — плавность. Сравним два способа поднять панель при наведении: через свойство раскладки top и через transform. Результат на экране одинаковый, но цена для браузера разная.

Старый подход: анимация дорогих свойств

Анимация top/left/width заставляет браузер на каждом кадре пересчитывать раскладку (reflow). На сложных страницах это заметно дёргается. Плюс переход висел только на :hover — нет реакции на клавиатурный фокус.

Панель поднята через top: -8px (reflow на каждом кадре)
📄 lesson-42/old.css
.panel {
  position: relative;
  top: 0;
  transition: top 300ms ease;   /* top → постоянный пересчёт раскладки */
}

.panel:hover {                  /* только мышь, без :focus */
  top: -8px;
}

Современный подход: transform + opacity

transform и opacity браузер анимирует на отдельном слое, без reflow — плавно даже на слабых устройствах. Добавляем :focus-within для доступности и контроль движения.

Панель поднята через transform (дёшево, без reflow)
📄 lesson-42/modern.css
.panel {
  transform: translateY(0);
  transition: transform 180ms ease, opacity 180ms ease;
}

.panel:hover,
.panel:focus-within {           /* реакция и на фокус */
  transform: translateY(-0.25rem);
}
Правило: для движения предпочитайте transform и opacity. Свойства, меняющие геометрию (top, left, width, height, margin), анимируйте только при необходимости.

Навигация