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.
