A moving loader can reassure someone that an application is working, but screen motion can also cause dizziness or nausea. The CSS `prefers-reduced-motion` media feature lets styles respond to a user’s device setting. Use `reduce` when the user has requested less motion; use `no-preference` when they have not specified that preference. section 3.5
Stop a loader’s animation
Keep the loader, but remove its rectangle animation for users who request reduced motion: @media (prefers-reduced-motion: reduce) { rect { animation: none; } } Chrome DevTools can emulate the reduced-motion preference so you can check the result. section 3.5
Another approach is to add motion only when there is no reduced-motion preference. A summary-card interaction uses `@media (hover: hover) and (min-width: 700px) and (prefers-reduced-motion: no-preference)` so its animated reveal runs only when all three conditions match. section 5.5
Listing 9.24 Transitions and transform
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
...
.card-item {
transform-style: preserve-3d;
transition: transform 350ms cubic-bezier(0.71, 0.03, 0.56, 0.85);
}
...
}
The card-flip listing puts a 350 ms rotation transition inside a `no-preference` query, keeping that motion-heavy transition out of the reduced-motion version. section 9.5.3
Reduced motion need not mean removing every animation. When deciding what to keep, consider its speed, duration, viewport coverage, flash rate, and importance to understanding or using the interface. For nonessential animation lasting more than three seconds, provide a way to pause, stop, or hide it. An onsite motion opt-out may also help users who do not know about their device setting. section 3.5
