Как настроить анимации Elementor с учетом prefers-reduced-motion

Что такое prefers-reduced-motion и зачем его учитывать

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

Это не означает, что нужно полностью убрать любые визуальные изменения. Обычно достаточно отключить декоративное движение: parallax, floating, масштабирование при наведении, длительные переходы, автоматические слайды и эффекты появления. Изменение цвета, тени или четкое мгновенное состояние hover часто можно оставить.

Такой подход улучшает доступность и UX: пользователь получает тот же контент и функциональность, но без потенциально дискомфортного движения.

• prefers-reduced-motion работает на уровне настроек операционной системы или браузера;
• медиазапрос не требует JavaScript;
• правило нужно применять ко всем компонентам, где есть движение, а не только к одному hero-блоку;
• доступность не заменяет проверку производительности: чрезмерные анимации могут замедлять сайт и для пользователей без этого режима.

Как подготовить блоки в Elementor

Сначала составьте список элементов, в которых используется анимация. Проверьте hover-эффекты кнопок и карточек, переходы цвета или тени, появление блоков при прокрутке, parallax-фоны, floating-эффекты и другие Motion Effects.

Для каждого контейнера, секции или виджета с движением добавьте общий CSS-класс, например animated-block. В Elementor класс обычно задается в разделе дополнительных параметров элемента, в поле CSS Classes. Названия и доступность отдельных полей могут отличаться в зависимости от конфигурации Elementor и темы.

Не добавляйте этот класс ко всему сайту без необходимости. Если правило отключит transition у большого контейнера, оно может затронуть вложенные кнопки, ссылки и другие элементы, которым нужно обычное состояние hover.

• добавьте класс animated-block к карточкам, кнопкам, секциям и контейнерам с движением;
• проверьте также вложенные элементы, псевдоэлементы и фоновые эффекты;
• используйте понятные названия классов, чтобы через несколько месяцев было легко найти все анимированные блоки;
• если на сайте много компонентов, можно создать отдельные классы для разных сценариев: animated-block, parallax-block, floating-element.

CSS для отключения transition и animation

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

Использование !important здесь оправдано: оно помогает переопределить стили отдельных виджетов и глобальные правила Elementor. При этом не стоит применять такой подход ко всем элементам страницы без класса, поскольку это может непредсказуемо изменить интерфейс.

@media (prefers-reduced-motion: reduce) {
  .animated-block,
  .animated-block * {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

Почему scroll-behavior нужно задавать для html

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

Это правило не отключает прокрутку как таковую — оно лишь убирает плавную анимацию. Пользователь по-прежнему сможет переходить между секциями и пользоваться якорями.

Если анимация изменяет transform или opacity

Отключение animation и transition не всегда возвращает элемент в исходное визуальное состояние. Например, если блок постоянно имеет transform: translateY(...) или opacity: 0, после отключения перехода он может остаться смещенным или невидимым.

В таком случае добавьте для reduced-motion финальные статичные значения. Конкретные свойства зависят от вашей анимации.

@media (prefers-reduced-motion: reduce) {
  .animated-block,
  .animated-block * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

Что делать с Elementor Motion Effects

Motion Effects могут работать сложнее, чем обычный CSS hover. Parallax, scrolling effects, entrance animation и floating-эффекты могут изменять transform при прокрутке или запускаться через логику Elementor. Одного правила для transition иногда недостаточно.

Для важного контента самый надежный вариант — подготовить упрощенное представление без parallax, floating и scroll-анимаций. Оно должно содержать тот же текст, изображения и функциональность, но не зависеть от движения.

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

• анимационный блок имеет класс animated-version;
• статичный вариант имеет класс reduced-version;
• по умолчанию показывается animated-version;
• в режиме reduced motion animated-version скрывается, а reduced-version показывается;
• проверьте, чтобы скрытый блок не оставался доступным для клавиатуры и скринридера.

.reduced-version {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .animated-version {
    display: none !important;
  }

  .reduced-version {
    display: block !important;
  }
}

Когда отдельная копия блока не нужна

Если эффект является только декоративным и после его отключения контент выглядит нормально, лучше оставить один блок. Это уменьшает дублирование HTML и упрощает поддержку страницы.

Отдельный статичный вариант оправдан, когда анимация влияет на композицию, видимость или способ представления информации, а простая отмена transform или transition не дает корректного результата.

Проверка работы на сайте

После добавления CSS проверьте не только редактор Elementor, но и опубликованную страницу в обычном режиме и режиме reduced motion. Редактор может отображать эффекты иначе, чем фронтенд, а кеширование способно скрыть изменения стилей.

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

Также полезно проверить страницу на реальном устройстве с активированным системным режимом уменьшения движения. Особое внимание уделите меню, модальным окнам, слайдерам, sticky-элементам, якорной навигации и формам.

• в режиме reduce не запускаются entrance, floating, parallax и scroll-анимации;
• контент не становится невидимым из-за opacity или transform;
• кнопки и ссылки остаются доступными с клавиатуры;
• не возникает горизонтальной прокрутки или скачков макета;
• переходы к якорям выполняются без плавной анимации;
• после отключения reduced motion обычная версия сайта продолжает работать корректно.

Распространенные ошибки при настройке

Самая частая ошибка — отключить только transition, хотя эффект реализован через keyframes или Motion Effects. Для более полного покрытия нужно учитывать animation, transform, opacity и прокрутку.

Другая проблема — добавить CSS, но не очистить кеш. После изменений проверьте кеш плагина оптимизации, CDN и браузера. Также убедитесь, что стили действительно загружаются на фронтенде.

Не следует скрывать важную информацию только для пользователей с reduced motion. Упрощенная версия должна сохранять содержание, навигацию и основные действия. Цель — убрать движение, а не ограничить функциональность.

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

• не используйте prefers-reduced-motion как причину скрывать контент;
• не добавляйте !important к глобальным селекторам без ограничения классом;
• не считайте, что отключение CSS автоматически останавливает любой JavaScript-эффект;
• не забывайте о мобильном меню, слайдерах и попапах — они также могут содержать движение.