The prefers-reduced-motion media feature can match a user preference for less movement. It does not tell the application to remove content or feedback.
Make this comfortable
CSS reduced motion: remove nonessential movement at the source
How the rule works
A case panel fades into view after a filter changes. The filter result must be perceivable even with no fade, so its status text and position remain stable. Apply a short transition by default, then remove it for users who request reduced motion. Do not replace a long, disorienting slide with a barely shorter slide and claim the preference was honored. If animation communicates progress, provide a text or static indicator. Test the operating-system preference and the browser emulation, and verify that the panel does not flash through a hidden intermediate state.
.case-panel { transition: opacity 180ms ease-out; }
.case-panel[data-state="loading"] { opacity: .65; }
@media (prefers-reduced-motion: reduce) {
.case-panel { transition: none; }
}Cost and verification
Opacity transitions can be cheaper than animating layout, but they still add paint and may obscure text during the transition. A media query costs little; maintaining two coherent motion paths is the real work. The loading state should also be communicated in text because opacity alone is ambiguous. Avoid a blanket rule that turns every duration into nearly zero without reviewing each interaction's timing and cleanup.
Common Mistakes
- Do not make movement the only signal of a new result.
- Do not force all transitions to zero without checking state handoff.
- Do not ignore a reduce preference for decorative motion.
Connected lessons
css
interaction
web