prefers-reduced-motion

Baseline Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Предупреждение: Встроенный пример внизу этой страницы имеет масштабируемое движение, которое может быть проблематичным для некоторых читателей. Читатели с вестибулярными нарушениями движения могут захотеть включить функцию снижения движения на своем устройстве перед просмотром анимации.

Свойство prefers-reduced-motion CSS свойство среды используется для определения того, включил ли пользователь на своем устройстве параметр для минимизации неважных движений. Этот параметр сообщает браузеру на устройстве, что пользователь предпочитает интерфейс без, с уменьшенным или заменённым движением, основанным на анимации.

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

@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
}

Синтаксис

no-preference: Указывает, что пользователь не определил предпочтения на устройстве. Это ключевое значение оценивается как ложь.
reduce: Указывает, что пользователь включил на своем устройстве настройку для уменьшения движения. Это ключевое значение оценивается как истинно.

Настройки пользователя

Для Firefox запрос reduce выполняется, если:

В GTK/GNOME: Настройки > Доступность > Вид > Уменьшить анимацию включена.
- В старых версиях GNOME, GNOME Tweaks > Вкладка «Общие» (или «Внешний вид», в зависимости от версии) > Анимации выключены.
- В качестве альтернативы добавьте gtk-enable-animations = false в [Settings] блок файла конфигурации GTK 3.
В Plasma/KDE: Настройки системы > Поведение рабочего стола -> Общее поведение > «Скорость анимации» установлена в крайнее правое значение «Мгновенно».
В Windows 10: Настройки > Доступность > Экран > Показывать анимации в Windows.
В Windows 11: Настройки > Доступность > Визуальные эффекты > Эффекты анимации
В macOS: Системные настройки > Доступность > Экран > Снизить движения.
В iOS: Настройки > Доступность > Движение.
В Android 9+: Настройки > Доступность > Убрать анимации.
В Firefox about:config: Добавьте числовую настройку, называемую ui.prefersReducedMotion, и установите её значение либо в 0 для полной анимации, либо в 1 для обозначения предпочтения уменьшенного движения. Изменения в этом параметре вступают в силу немедленно.

Примеры

В этом примере используется анимация масштабирования для демонстрации prefers-reduced-motion. Если вы включите настройку уменьшения движения в настройках доступности на своём устройстве, средство prefers-reduced-motion media query обнаружит ваше предпочтение, и CSS внутри правил уменьшения движения, с той же специфичностью, но последующим появлением в порядке следования CSS, будет иметь приоритет. В результате анимация анимации на блоке будет уменьшена до dissolve анимации, которая является более приглушённой анимацией и не является триггером вестибулярного движения.

Уменьшение масштабирования анимации

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

Результат

Вы можете включить настройку уменьшения движения на своём устройстве, чтобы увидеть изменения в масштабировании анимации. В этом примере используется цвет фона и линия над текстом, чтобы визуально подчеркнуть, когда ключевая кадр анимация меняется в ответ на включение или отключение параметра.

Спецификации

Спецификация
Media Queries Level 5 # prefers-reduced-motion

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`prefers-reduced-motion`	74	79	63	62	10.1	74	64	53	10.3	11.0	74

См. также

Sec-CH-Prefers-Reduced-Motion HTTP-заголовок User Agent Client Hint
Введение в средство уменьшения движения media query на CSS-Tricks (2019)
Отзывчивый дизайн для движения в блоге WebKit (2017)

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion