prefers-reduced-motion
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