Уменьшение движения

Анимации, движения и плавные переходы — это круто! Пользователи такое любят, если всё работает плавно и не лагает. Но есть пользователи, которые хотят отключить эти анимации по разным причинам. Например, движения на экране могут вызывать головокружение, головную боль и тошноту у людей с некоторыми нарушениями здоровья. Или анимации потребляют CPU/GPU и увеличивают потребление батареи, что нежелательно при малом количестве заряда.

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

Самое простое и быстрое, что можно сделать — это добавить следующий сниппет кода в ваш проект:

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none !important;
  }
 
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
    view-transition-name: none !important;
  }
}

Этот сниппет отключает View Transition и сводит к минимуму анимации и переходы. Не идеально, но в условиях нехватки времени — хороший компромисс. И это тот случай, когда использование !important уместно.

Если на сайте используются “гифки”, то лучше заменить их на видео. Но если “гифки” есть, можно добавить статическую версию изображения и реализовать переключение при помощи <picture>, <source> и атрибута media:

<picture>
  <source
    srcset="animated-logo.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  >
  <img src="static-logo.png" alt="Company name" width="80" height="80">
</picture>

Если на сайте есть автоматически воспроизводимые видео, это тоже стоит отключать в режиме уменьшения движения. Можно добавить статическую обложку при помощи атрибута poster, использовать matchMedia и останавливать воспроизведение через JavaScript.

Анимации, реализуемые средствами JavaScript, например, через Web Animation API или библиотеку GSAP, так же нужно отключать или уменьшать. Можно проверять, включён ли режим уменьшения движения при помощи того же matchMedia и реагировать на это соответствующим образом.