prefers-reduced-motion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Синтаксис

no-preference

Указывает, что пользователь не сделал никаких предпочтений, известных системе.

reduce

Указывает, что пользователь уведомил ОС, что он предпочитает интерфейс, который минимизирует количество движения или анимации, предпочтительно до точки, где удаляются все несущественные движения.

Примеры

В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.

HTML

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

CSS

css
.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}

Результат

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

Specification
Media Queries Level 5
# prefers-reduced-motion

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

BCD tables only load in the browser

Смотрите также