Уменьшение движения: доступные анимации
Как учитывать prefers-reduced-motion и сохранять смысл интерфейса без декоративного движения.
Зачем это нужно
Сильные перемещения и масштабирование могут вызывать дискомфорт. Некоторые пользователи явно включают системную настройку уменьшения движения. Интерфейс должен учитывать этот выбор, особенно для необязательных декоративных эффектов.
Отделите смысл от эффекта
Изменение состояния должно быть понятно по тексту, форме или другим устойчивым признакам. Анимация может помогать ориентации, но не должна быть единственным носителем результата.
Используйте медиазапрос
В @media (prefers-reduced-motion: reduce) отключайте или заменяйте существенное движение спокойным изменением. Не обязательно убирать вообще любой переход: решение зависит от характера эффекта.
Проверьте связанный JavaScript
Если код ожидает событие transitionend для обязательного действия, отключение перехода может нарушить логику. Завершение операции не должно зависеть только от декоративной анимации.
Важное ограничение
Контрольная проверка
- Учтена системная настройка уменьшения движения.
- Смысл состояния сохраняется без анимации.
- Нет обязательного ожидания декоративного эффекта.
- Большие автоматические перемещения ограничены.
Продолжить изучение: transition, transform.