Flexbo saysprefers-reduced-motion lets users opt out of animations — honor it for accessibility.
Some people get motion sickness from animations. @media (prefers-reduced-motion: reduce) matches when they've asked the OS to minimize motion. Inside it, disable or soften transitions and animations. A small rule that makes your site usable for a meaningful group.
Power-ups you unlock
@media (prefers-reduced-motion: reduce)
Disable/soften animations inside it
Respects an OS accessibility setting
Essential on motion-heavy sites
The Float Phantom attacks — common mistakes
Shipping big animations with no reduced-motion fallback
Only reducing some animations, not all
Assuming nobody needs it
Boss battleAnimate a box, then kill the animation inside prefers-reduced-motion:reduce.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>.b{width:60px;height:60px;background:#b388ff;animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.b{animation:none}}</style></head><body style="background:#06040d;padding:20px"><div class="b"></div></body></html>