02Motion

Микроанимации интерфейса

Hover, focus, активные состояния, toast'ы, переходы — мелкая моторика интерфейса.

Спроектируй микроанимации.

Правило №1: Анимация должна сообщать, а не украшать. Если убрать её — что станет хуже понимать?

Кандидаты на анимацию

Элемент	Что анимировать	Длительность
Кнопка hover	bg + transform: translateY(-1px)	150ms
Кнопка active	scale(0.98)	100ms
Focus ring	opacity 0 → 1	200ms
Toast появление	slide-up + fade	250ms
Toast уход	fade	200ms
Modal open	scale + fade + backdrop	300ms
Modal close	scale + fade	200ms
Switch toggle	translate thumb + bg	250ms
Tab change	underline slide	200ms
Accordion expand	height + opacity	250-350ms
Tooltip	fade + small slide	150ms

Easing

/* Стандартные пресеты */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* "expo-out" — для появления */
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);    /* для исчезновения */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* для движения */

/* Правило: enter ≠ exit */
.enter { transition: all 250ms var(--ease-out); }
.exit  { transition: all 200ms var(--ease-in); }

Выход обычно быстрее входа.

Иерархия

Важное (модалка, тост): 250-400ms, видно
Реакция (hover, focus): 100-200ms, на грани заметности
Состояние (loading, transition): зависит от контекста

Reduced motion

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

Уважай это — у людей с вестибулярными проблемами анимация вызывает тошноту.

Что НЕ анимировать

✗ Длинные тексты (чтение прерывается)
✗ Списки которые часто обновляются (мерцание)
✗ Background-images (тяжело для GPU)
✗ Box-shadow одновременно с transform (jank)

Performant CSS

Анимируй только transform и opacity — они идут через compositor, не вызывают layout/paint:

/* плохо — пересчёт layout */
.bad { transition: top 200ms, left 200ms; }

/* хорошо — composite-only */
.good { transition: transform 200ms; }

/* плохо — paint */
.bad { transition: background-color 200ms, box-shadow 200ms; }

/* лучше — opacity на overlay */
.good::after { transition: opacity 200ms; }