Some people experience discomfort from large or repeated motion. The prefers-reduced-motion media feature lets a page reduce nonessential animation when the visitor's device requests it.

@media (prefers-reduced-motion: reduce) {
  .card {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

Reduce motion, not information

  • Keep state changes visible with an immediate style or a concise status message.
  • Avoid flashing, parallax, and large movement when a simpler fade or instant change works.
  • Do not remove focus indicators or make controls harder to use in the reduced-motion mode.

Test both settings

Enable reduced motion in the operating system or browser tools and try every interactive element. Confirm the page remains understandable when animation is removed.

A respectful default gives visitors control without requiring them to find a special setting inside the site.