Как отключить анимацию для тех, кто этого просит

Короткий ответ

Оберните анимации в медиазапрос, который проверяет настройку системы:

<style>
  @keyframes slide { from { translate: -40px 0; } to { translate: 40px 0; } }
  .ball { width: 30px; height: 30px; margin: 12px auto; border-radius: 50%; background: tomato; }
  @media (prefers-reduced-motion: no-preference) {
    .ball { animation: slide 1s ease-in-out infinite alternate; }
  }
</style>
 
<div class="ball"></div>

Если в настройках включено «Уменьшить движение», мяч стоит на месте. Иначе он катается туда-сюда.

Зачем это нужно

У людей с вестибулярными нарушениями крупные движения на экране — параллакс, масштабирование, плавная прокрутка — вызывают головокружение и тошноту. Настройка есть во всех ОС: в Windows, macOS, iOS и Android.

Глобальный выключатель

Если анимаций на сайте много, можно приглушить все разом:

@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;
  }
}

Почти нулевая длительность вместо none сохраняет события конца анимации, на которые может опираться JavaScript.

Частая ошибка

Уменьшение движения — не то же самое, что отсутствие анимации. Плавная смена цвета или прозрачности обычно никому не мешает; убирать нужно перемещения, вращение и масштабирование. И не забудьте про scroll-behavior: smooth — это тоже движение.