Урок 6: Анимация и микровзаимодействия — дозировка и доступность

Вы добавили 600-мс подпрыгивание каждой кнопке, и это казалось круто — пока пользователь с чувствительностью к движению не сообщил, что от экрана у него кружится голова. Этот урок научит вас анимации на основе токенов: тонкие переходы, осмысленные микровзаимодействия и уважение к `prefers-reduced-mo

Анимация — как приправа: немного улучшает блюдо, слишком много портит, а некоторые люди чувствительны. Тому, кто попросил меньше движения, вы подаёте не худшее блюдо, а более спокойную версию: заменяете сильную специю мягкой, не теряя вкуса. С анимацией так же: вы убираете крупное движение, но сохраняете обратную связь.

токен перехода: Фиксированное значение длительности и функции сглаживания из небольшого набора — например `duration-200 ease-out`, — так что каждый переход в UI ощущается единообразным, а не случайным.
микровзаимодействие: Небольшая визуальная обратная связь на действие пользователя — лёгкое изменение при наведении, нажатии или фокусе, — которая подтверждает, что что-то произошло, не отвлекая.
prefers-reduced-motion: Системная настройка, в которой пользователь просит уменьшить движение (часто из-за вестибулярной чувствительности). «Уменьшить» — не «убрать»: доступный UI снимает крупное движение, но сохраняет обратную связь — например, мгновенное изменение состояния вместо анимации.
вариант motion-reduce: Вариант Tailwind, применяющий классы только когда пользователь запросил уменьшенное движение — например, `motion-reduce:transition-none`, убирающий переход для него.