Переходы и анимации

Что такое переходы и анимации

Движение в интерфейсе — это не украшение, у него есть задача: показать, что изменилось, откуда появился элемент и что ваше действие сработало. CSS даёт два инструмента:

Transition

.btn {
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

transition: <свойство> <длительность> <easing> <задержка>. Избегайте transition: all — анимируются и ненужные свойства (и это дорого).

@keyframes и animation

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.toast {
  animation: fade-in 200ms ease-out both;
}

Easing — кривая скорости

Длительность: 100–200 мс для обратной связи (hover), 200–300 мс для появления, редко больше 400 мс. Длинные анимации делают интерфейс медленным.

Что анимировать — производительность

Анимируйте только transform и opacity: они считаются на GPU, без layout. width, height, top, margin вызывают layout на каждом кадре → дёрганая анимация. Объяснение — в уроке Как браузер отрисовывает страницу.

Уважайте настройку пользователя

У некоторых людей бывает укачивание или вестибулярная чувствительность, и они включают в системе «уменьшить движение». Обязательно:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

В Tailwind: motion-safe:animate-… / motion-reduce:transition-none.

Современное: появление из display: none

.dialog[open] {
  opacity: 1;
  transition: opacity 200ms, display 200ms allow-discrete;
  @starting-style { opacity: 0; }
}

@starting-style задаёт состояние «до появления» — можно анимировать элементы, которые только что вышли из display: none. Для переходов между страницами есть View Transitions API.

Дальше

Анимации в React (Motion), таймлайны и скролл (GSAP) и полные примеры — в теме Анимации.

Коротко

• Transition = от A к B при изменении; animation = @keyframes, запускается сама.
• ease-out при появлении, 150–300 мс; только transform и opacity.
• prefers-reduced-motion обязателен.

Официальные источники

• MDN — Using CSS transitions
• MDN — Using CSS animations
• MDN — prefers-reduced-motion
• web.dev — Animations guide