Be Careful with Motion and Animation

Animations can be delightful, but they can also cause dizziness, nausea, disorientation, or even seizures for some users.

That’s why WCAG includes specific guidance:

• Pause, Stop, or Hide: Users must be able to stop auto-playing moving content.
• Flashes per Second: Nothing should flash more than three times per second (unless it falls below the seizure risk threshold).
• Reduced Motion Respect: You should check and honor the user’s “prefers-reduced-motion” setting.

Good Practice

• Allow users to pause, stop, or hide animations that autoplay
• Never flash elements more than 3x per second
• Use the prefers-reduced-motion media query to disable or simplify motion
• Avoid scroll-jacking, complex parallax, or shaking/flickering effects

📘 Example: Turning Motion Off Globally

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    transition: none !important;
  }
}

Or reduce movement without removing it completely:

@media (prefers-reduced-motion: reduce) {
  .hero {
    transform: none;
    animation: none;
  }
}

Pro Technique: Motion Toggle with CSS Variables

Here’s a CSS trick that uses a custom property (—motion) as a multiplier for animation and transition values:

:root {
  --motion: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
  }
}

.animated {
  transition: transform calc(0.3s * var(--motion)) ease;
  animation-duration: calc(1s * var(--motion));
}

Now all your animations or transitions will gracefully reduce to zero duration when motion should be minimized — without duplicating styles or writing !important overrides everywhere.

Watch Out For

• Carousels or videos that autoplay without controls
• Sections that slide in from all directions
• Background animations that can’t be paused
• Flickering elements (GIFs, CSS keyframes) that exceed 3 flashes per second
• Disabling animation in only one place — do it globally and consistently

How to Test

• macOS: System Settings → Accessibility → Display → Reduce motion
• Windows: Settings → Accessibility → Visual effects → Animation effects
• Chrome DevTools: Open DevTools → Rendering → Emulate prefers-reduced-motion

Try toggling these settings and visiting your site. The experience should be just as usable — without unnecessary movement.

Do this today: Audit your site’s animations and auto-playing content. Are they essential? Can they be paused or stopped? Are they overwhelming? Try enabling reduced-motion mode and make sure your site still works — comfortably.