Как уменьшить анимацию сайта через prefers-reduced-motion
Prefers-reduced-motion помогает учесть настройку уменьшения движения. Уберите лишние перемещения, сохраните смысл состояний и проверьте оба режима сайта.
Что должно получиться
Человек выбирает меньше движения в настройках своего устройства, а сайт учитывает это предпочтение. Карточки больше не вылетают из-за края, фон не движется отдельно от текста, переход к разделу не превращается в длинный пролёт. При этом содержание появляется, действие завершается, а результат остаётся понятным.
Уменьшение движения не означает отключение интерфейса. Если убрать вращение индикатора, всё равно нужно сообщить об ожидании. Если отменить выезд панели, панель должна открыться и получить нужное состояние. Начинайте с результата действия, затем выбирайте его спокойное визуальное представление.
Из чего это складывается
| Источник движения | Что можно изменить | Что сохранить |
|---|---|---|
| CSS-анимация | Убрать перемещение или масштабирование | Конечный вид элемента |
| CSS-переход | Сменить состояние без пролёта | Видимость и понятность результата |
| Плавная прокрутка | Перейти к месту без длительного движения | Правильную позицию и фокус |
| Сценарий JavaScript | Учитывать предпочтение в логике эффекта | Рабочее действие и завершение |
| Внешний виджет | Проверить доступные настройки | Возможность пользоваться содержимым |
Как понимать настройку
Значение reduce означает предпочтение уменьшить необязательное движение. Значение no-preference означает, что такое предпочтение не выражено через этот механизм. Оно не даёт разрешения добавлять любые эффекты и не подтверждает, что анимация удобна конкретному человеку.
CSS-условие само не останавливает все движения на странице. Оно выбирает правила, которые вы описали. Отдельный сценарий, встроенное видео или внешний компонент могут продолжать работать по своей логике. Составьте список источников движения, чтобы проверка не ограничилась одним декоративным баннером.
Как это сделать по шагам
- Пройдите основные сценарии и запишите, где появляются перемещения, масштабирование, параллакс и плавные переходы между областями.
- Для каждого эффекта определите полезный результат. Например, после открытия панели её содержимое должно стать доступным независимо от способа появления.
- Подготовьте спокойный вариант оформления. Уберите необязательное перемещение, но оставьте видимую смену состояния или текстовое подтверждение.
- Добавьте правила @media (prefers-reduced-motion: reduce) для конкретных компонентов. Проверьте каскад и конечные значения свойств.
- Для эффектов на JavaScript проверьте предпочтение через matchMedia. Если настройка меняется во время работы, предусмотрите обновление поведения.
- Включите уменьшение движения в тестовой среде и повторите открытие меню, переходы, отправку формы и появление новых данных.
- Проверьте обычный режим, затем снова уменьшенный. Запишите компоненты, которые не реагируют на настройку, и отдельно разберите их реализацию.
Пример для появления блока
Предположим, блок intro в обычном варианте появляется с перемещением и изменением прозрачности. Для уменьшенного движения можно задать: @media (prefers-reduced-motion: reduce) { .intro { animation: none; transform: none; opacity: 1; } html { scroll-behavior: auto; } }
Пример предполагает, что содержимое intro уже должно быть показано. Если блок закрыт до действия пользователя, не открывайте его одним правилом уменьшения движения. Состояние «открыт» определяет логика интерфейса, а CSS выбирает, как это состояние выглядит. Проверьте, что более позднее или более сильное правило не возвращает эффект.
Отключение animation без проверки opacity и transform может оставить элемент прозрачным или сдвинутым. Смотрите на фактический конечный вид, а не только на отсутствие движения. Если анимация служила единственным способом привести элемент в нормальное положение, исправьте базовые стили.
Эффекты на JavaScript
Проверка начинается с matchMedia('(prefers-reduced-motion: reduce)'). Свойство matches показывает текущее совпадение, а событие change позволяет отреагировать на смену предпочтения. Решите, как завершить уже начатый эффект: остановить его и привести компонент к понятному конечному состоянию либо заменить спокойным представлением.
Одной проверки при загрузке недостаточно, если человек меняет настройку, не закрывая страницу.
Частые ошибки
Отключать всё одним общим правилом
Массовое обнуление длительностей может затронуть сторонние компоненты. В старом коде завершение действия иногда ошибочно привязано к событию окончания анимации. Если событие больше не наступает, интерфейс зависает. Исправляйте такую зависимость и проверяйте компонент, вместо того чтобы считать отсутствие движения готовым результатом.
Просто делать движение быстрее
Резкое перемещение большого объекта не обязательно становится удобнее из-за короткой длительности. Выбирайте вариант без лишнего пролёта или масштабирования. Если заменяете эффект изменением прозрачности, оценивайте и этот вариант, особенно при повторении.
Оставлять бесконечную декоративную анимацию
Настройка уменьшения движения не решает автоматически вопросы остановки самозапускающегося содержимого. Проверьте такие элементы отдельно. Для чтения инструкции человеку не должно требоваться постоянно следить за движущимся украшением рядом с текстом.
Как проверить
- В обоих режимах сохраняются все данные и действия.
- После появления блока его текст виден, а положение не осталось промежуточным.
- Открытие и закрытие панели не зависят от окончания декоративного эффекта.
- Переход к разделу приводит к нужному месту, даже если плавная прокрутка отключена.
- Изменение настройки во время работы учитывается там, где есть сценарные эффекты.
- Внешние виджеты и самозапускающееся содержимое проверены отдельно.
Дополните проверку инструкциями про управление с клавиатуры, состояния действия и переход к блоку страницы. Помощь с реализацией можно найти в разделе «Разработка».
Вопросы и ответы
Нужно ли полностью удалять любую анимацию?
Сначала уберите необязательное движение и проверьте назначение каждого эффекта. Смысл действия и необходимую информацию нужно сохранить в доступном представлении.
Почему CSS-условие не повлияло на виджет?
Виджет может использовать собственный сценарий или изолированное оформление. Проверьте, предусмотрен ли спокойный режим именно в его реализации.
Можно ли оставить индикатор ожидания?
Да, ожидание должно быть понятно. Выберите спокойное обозначение и проверьте, что оно сообщает о процессе без лишнего непрерывного движения.
Что делать с плавной прокруткой из JavaScript?
Проверьте параметры самого сценария. Изменение CSS-свойства не заменяет учет предпочтения в коде, который отдельно выбирает плавное поведение.
Почему после отключения эффекта пропал текст?
Вероятно, исходное оформление оставляет прозрачность или смещение, которые раньше меняла анимация. Задайте рабочий конечный вид для нужного состояния.
Обычный режим тоже нужно проверять?
Да. Правки каскада и сценариев могут затронуть оба варианта. Повторите одинаковые действия и сравните конечный результат.