CSS prefers-reduced-motion
Respect user accessibility preferences for less motion and safer, more inclusive interfaces.
What is the Reduced Motion Query?
The CSS prefers-reduced-motion media query allows you to detect if a user has requested reduced motion in their operating system or browser settings. This is crucial for accessibility, as some users experience discomfort or dizziness from excessive animation or parallax effects.
- Accessibility First: Many users rely on this setting for a comfortable browsing experience.
- How it works: Use the media query to reduce, remove, or simplify animations and transitions.
- Values:
no-preference(default),reduce(user prefers less motion).
Syntax
/* Reduce or remove animation for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
transition: none;
}
}
Tip: Always provide a functional and visually clear fallback for users who opt out of motion!
Browser Support:
prefers-reduced-motion is supported in all modern browsers.
Interactive Example
Bouncing Ball Animation
.bouncing-ball {
animation: bounce 1.2s infinite alternate cubic-bezier(.5,1.5,.5,1);
}
@media (prefers-reduced-motion: reduce) {
.bouncing-ball {
animation: none;
}
}
Fade In Text
Hello, CSS World!
.fade-in-text {
animation: fadeIn 2s ease-in;
}
@media (prefers-reduced-motion: reduce) {
.fade-in-text {
animation: none;
opacity: 1;
}
}
Try it: If your OS/browser has "Reduce Motion" enabled, the animations above will be disabled for a more comfortable experience.