Prefers-reduced-motion
prefers-reduced-motion is a CSS media feature that indicates whether a user has requested reduced nonessential motion.
Tiny CSS Projects
The prefers-reduced-motion media feature reports whether a user has requested reduced motion, allowing CSS to adapt accordingly.
- How it is used
- Adapts loaders and interactive cards to a user’s motion preference.
- How deep it goes
- Defines both query values and works through disabling or gating animation, without detailing browser implementation.
- Examples
- Uses an animated SVG loader, hover-and-focus summary cards, and a virtual credit-card flip.
- What you can do after
- Apply it via CSS media queries to stop a loader animation or limit card transitions to users without a reduced-motion preference.
Read how Tiny CSS Projects explains prefers-reduced-motion →
CSS in Depth, Second Edition
The prefers-reduced-motion media feature indicates whether a user has requested reduced nonessential motion.
- How it is used
- Supports accessible interfaces by responding to a user’s request for reduced nonessential motion.
- How deep it goes
- Defines a stylesheet-wide reset pattern and explains its cascade priority and event-preserving duration choice.
- Examples
- Uses a reset-layer universal-selector rule to shorten animations and transitions, limit iterations, and disable smooth scrolling.
- What you can do after
- Apply it via CSS to suppress nonessential motion when users request reduced motion while preserving transition-dependent behavior.
Read how CSS in Depth, Second Edition explains prefers-reduced-motion →
Related concepts
- media querykind of · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
- animationconfigures · Animation is the presentation of changing visual states over time to create the appearance of motion or change.
- parallax effectconfigures · A parallax effect is a visual effect in which different elements appear to move at different rates as the viewing position changes, creating an illusion of depth.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.