Frontend Academy · Урок

Учет prefers-reduced-motion

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

«Учет prefers-reduced-motion» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

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

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

Определение уменьшенного движения в CSS

Поместите анимации в противоположный запрос: применяйте их обычно, а затем переопределяйте или отключайте для пользователей, предпочитающих меньше движения.

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

Принцип «уменьшить, а не убрать»

prefers-reduced-motion: reduce не означает полного отсутствия движения. Некоторые движения передают важные изменения состояния интерфейса. Вместо полного удаления анимаций замедлите их или упростите до плавного перехода между изображениями.

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

Радикальный вариант: отключить все анимации

Распространённый подход — глобально отключать все переходы и анимации для пользователей, предпочитающих уменьшенное движение. Это безопасная базовая настройка, даже если не каждая анимация настроена отдельно.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Определение уменьшенного движения в JavaScript

Используйте API matchMedia, чтобы определить это предпочтение в JavaScript — это пригодится для управления анимациями на холсте, движением, создаваемым JavaScript, или автовоспроизведением видео.

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

Прокрутка и автовоспроизведение

Для пользователей, предпочитающих уменьшенное движение, также отключайте плавную прокрутку: scroll-behavior: auto. Останавливайте автоматическое воспроизведение видео. Не допускайте мигания и стробирования содержимого.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3 — анимация при взаимодействии

WCAG 2.3.3 (уровень AAA) требует, чтобы движение, вызванное взаимодействием с пользователем, можно было отключить. Учитывая prefers-reduced-motion, Вы соблюдаете этот критерий и повышаете доступность для пользователей с вестибулярными нарушениями.

Тестирование уменьшенного движения

В Chrome DevTools откройте панель отрисовки (меню с тремя точками → Дополнительные инструменты → Отрисовка) и включите параметр «Эмуляция медиавозможности CSS prefers-reduced-motion». Проверьте интерфейс в этом режиме перед публикацией.

Практика: безопасный шаблон анимации

Безопасная для движения анимация применяется по умолчанию и обёрнута так, чтобы её было легко отключить глобально.

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

Анимация фокуса должна сохраняться

Индикаторы фокуса (контур, показывающий, какой элемент сфокусирован) НЕ следует удалять даже для пользователей, предпочитающих уменьшенное движение. Они необходимы для навигации с клавиатуры и обычно не вызывают вестибулярных реакций.

Библиотеки и prefers-reduced-motion

Популярные библиотеки анимации (Framer Motion, GSAP, Anime.js) имеют встроенную поддержку уменьшенного движения. Хук useReducedMotion() в Framer Motion упрощает условное отключение сложных анимаций в React.

Быстрая проверка

Какая медиавозможность CSS определяет предпочтение пользователя видеть меньше движения в интерфейсе?

Повторение: prefers-reduced-motion

Некоторым пользователям требуется меньше движения по причинам, связанным со здоровьем вестибулярной и нервной систем. Используйте @media (prefers-reduced-motion: reduce), чтобы отключать или упрощать анимации. Определяйте предпочтение в JS с помощью matchMedia. Радикальный вариант: глобально задать для animation/transition-duration значение 0.01ms. WCAG 2.3.3 рекомендует это. Тестируйте с помощью панели отрисовки DevTools.

Часто задаваемые вопросы

Урок «Учет prefers-reduced-motion» бесплатный?

Да — полный текст урока «Учет prefers-reduced-motion» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Учет prefers-reduced-motion»?

Определяйте медиазапрос prefers-reduced-motion и отключайте или уменьшайте анимации для пользователей, предпочитающих меньше движения. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Учет prefers-reduced-motion»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy