Медиавозможность CSS `prefers-reduced-motion`

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

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

Синтаксис

no-preference

Указывает, что пользователь не указал предпочтения на устройстве. Это ключевое значение вычисляется как false.

reduce

Указывает, что пользователь включил на устройстве настройку уменьшения движения. Ключевое значение reduce вычисляется как true; следовательно, @media (prefers-reduced-motion) эквивалентно @media (prefers-reduced-motion: reduce).

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

Используйте следующие настройки, чтобы учитывать запрос reduce:

• В GTK/GNOME: Настройки > Специальные возможности > Зрение > включите «Уменьшить анимацию».
  • В старых версиях GNOME: GNOME Tweaks > вкладка General (или Appearance — в зависимости от версии) > отключите Animations.
  • Также можно добавить gtk-enable-animations = false в блок [Settings] файла конфигурации GTK 3.
  • Кроме того, попробуйте выполнить gsettings set org.gnome.desktop.interface enable-animations false, чтобы Firefox (и другие программы, использующие GTK версии 4) учитывал настройку reduce.
• В Plasma/KDE: Системные настройки > Поведение рабочей среды > Общее поведение > установите для параметра «Скорость анимации» значение «Мгновенно».
  • Также можно добавить AnimationDurationFactor=0 в блок [KDE] файла ~/.config/kdeglobals.
  • Или просто выполните kwriteconfig6 --key AnimationDurationFactor 0 в терминале.
• В Windows 10: Параметры > Специальные возможности > Дисплей > Показывать анимацию в Windows.
• В Windows 11: Параметры > Специальные возможности > Визуальные эффекты > Эффекты анимации.
• В macOS до версии 15 (Sequoia): Системные настройки > Универсальный доступ > Дисплей > Уменьшить движение.
• В macOS начиная с версии 25 (Tahoe): Системные настройки > Универсальный доступ > Движение > Уменьшить движение.
• В iOS: Настройки > Универсальный доступ > Движение.
• В Android 9+: Настройки > Специальные возможности > Удалить анимацию.
• В Firefox about:config: добавьте числовой параметр с именем ui.prefersReducedMotion и задайте ему значение 0 для полной анимации или 1, чтобы указать предпочтение уменьшенного движения. Изменения этого параметра вступают в силу немедленно.

Примеры

В этом примере используется анимация масштабирования, чтобы продемонстрировать prefers-reduced-motion. Если включить настройку уменьшения движения в параметрах специальных возможностей устройства, медиазапрос prefers-reduced-motion обнаружит ваше предпочтение, и правила 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: reduce) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

.animation {
  color: white;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Результат

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

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

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

См. также

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