CSS prefers-reduced-motion: отключить необязательную анимацию

Категория: CSS · Язык: CSS · Обновлено:

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

Рабочий пример

CSS
.card {
  transition: transform 180ms ease;
}
.card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

Переопределите анимацию в media query, не меняя смысл состояния. Тестируйте как обычный режим, так и Reduce Motion в настройках ОС или DevTools.

Частый вопрос

Нужно ли отключать все анимации?

Уменьшайте необязательное движение. Короткие анимации, которые передают важное состояние, можно заменить спокойным мгновенным изменением.