intermediate

Анимации и transitions

Анимируйте смену состояний через transitions, keyframes, easing, fill modes, reduced motion и compositor-friendly свойства.

Transitions интерполируют значения свойств при смене состояния; animations проигрывают keyframes во времени. Оба должны передавать состояние, оставаться отзывчивыми и уважать настройки пользователя.

					.dialog {
  transition: opacity 200ms ease, transform 200ms ease;
}
.dialog[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dialog { transition: none; }
}

Compositor-friendly свойства (`transform`, `opacity`) обычно обходят layout. Анимация `width`, `height`, `top` или `margin` запускает layout и может давать jank.

На интервью: триггеры transition, timing keyframes, reduced motion и стоимость layout-анимаций в pipeline.

Компромисс: выразительный motion против производительности и доступности при анимации layout-свойств.

Типовые ошибки: motion без смысла; layout-анимации на больших списках; нет fallback для reduced motion.

Чеклист:

Анимируйте осмысленные смены состояния.
Учитывайте prefers-reduced-motion.
Предпочитайте transform и opacity.
Профилируйте keyframes до оптимизации.