How to respect reduced motion

Short answer

Wrap animations in a media query that checks the system setting:

<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>

If "Reduce motion" is on in the settings, the ball stays still. Otherwise it rolls back and forth.

Why it matters

For people with vestibular disorders, large motion on screen — parallax, zooming, smooth scrolling — causes dizziness and nausea. Every OS has the setting: Windows, macOS, iOS and Android.

A global switch

If the site has many animations, you can tone them all down at once:

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

A near-zero duration instead of none keeps the animation end events that JavaScript may rely on.

Common mistake

Reduced motion is not the same as no animation. A smooth color or opacity change usually bothers no one; what you need to remove is movement, rotation and zooming. And do not forget scroll-behavior: smooth — that is motion too.