prefers-reduced-motion

Уважение к настройке пользователя: выключить или смягчить движения.

Уровень: средний 10 разделов 15 минут

1. Что это и зачем

Уважение к настройке пользователя: выключить или смягчить движения.

Переходы анимируют изменение свойств между состояниями, а @keyframes задаёт многошаговую сцену. Браузер интерполирует значения по кривой (timing function) и рисует кадры на композиторе.

{title} — украшение, а не смысл: движение должно этим помогать, а не тормозить пользователя.

2. Синтаксис и пример

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

Запись выше — базовый вариант использования. Обратите внимание, как prefers-reduced-motion вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

transition удобна для hover, animation — для циклов и появления. Не анимируйте layout-свойства — только transform и opacity. Паузу и стадии переключает play-state.

В реальной разметке prefers-reduced-motion встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — украшение, а не смысл: движение должно этим помогать, а не тормозить пользователя.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

transition/animation поддержаны везде; новые трубовые и scroll-функции (@supports и проверки производительности) требуют свежих браузеров.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Системная настройка «уменьшить движение».

Убирайте параллакс и крупные сдвиги для таких пользователей.

7. Практическое задание

Настройте анимации под reduced-motion.

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

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

8. Как применять в проектах

Ровные hover-эффекты на кнопках и карточках, поэтапное появление контента, карусели и скелетоны — стандартные места для анимаций.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

анимируются только transform/opacity;
длительности 150–300 мс, easing осмысленный;
prefers-reduced-motion учитывается;
не анимируется то, что не должны «дёргаться»;
конечное состояние видно без JS;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам