Имитация уменьшенного движения

Анимация CSS может быть проблемой со специальными возможностями. Операционные системы позволяют решить эту проблему, включив возможность отключения анимации, чтобы избежать путаницы пользователей и потенциальных проблем, связанных со здоровьем, таких как вызов припадков.

На веб-странице можно использовать запрос css-мультимедиа prefers-reduced-motion , чтобы определить предпочтения пользователя в отношении анимации. Затем заключите код анимации в тест, чтобы условно выполнить анимацию. Например:

header {
  /* The header element is animated */
  animation: slidein 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* The user prefers reduced motion */
  .header {
    /* Turn off the animation for the header element */
    animation: none;
  }
}

Чтобы проверить, работает ли код должным образом, не изменяя параметры операционной системы, имитируйте параметр ограниченного перемещения операционной системы в средствах разработки:

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

2. В средствах разработки нажмите клавиши CTRL+SHIFT+P (Windows/Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Команд.

3. Начните вводить сокращенный текст, выберите параметр Эмуляция CSS prefers-reduced-motion и нажмите клавишу ВВОД:

   

4. Обновите веб-страницу и проверка, выполняются ли анимации.

См. также

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