prefers-reduced-motion

Как сделать анимацию на сайте доступной.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Одно из значений директивы @media для проверки пользовательских настроек. Отслеживает, отключена ли анимация в системе.

Пример

Секция статьи "Пример"
        
          
          @media (prefers-reduced-motion: no-preference) {  html {    scroll-behavior: smooth;  }}
          @media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

        
        
          
        
      

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

Как пишется

Секция статьи "Как пишется"

У prefers-reduced-motion есть два значения:

  • no-preference — настройки анимации по умолчанию.
  • reduce — анимация отключена.

Как понять

Секция статьи "Как понять"

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