prefers-reduced-motion

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

Синтаксис

no-preference

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

reduce

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

Примеры

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

HTML

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

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
Unknown specification
# prefers-reduced-motion

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

BCD tables only load in the browser

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