The prefers-reduced-motion media feature detects when a user requests less nonessential motion because animations and large onscreen movements can cause discomfort for some users. section 15.1
A stylesheet-wide motion reduction rule
Put the preference check in a low-priority reset layer so it applies broadly: @layer reset { @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } }. The very short duration preserves mechanisms that depend on transitions or animations, such as JavaScript's animationend event, instead of setting transition: none. section 15.1 section 8.1.2
The pattern combines several deliberate choices:
- Use the reduce value to respond to a browser or operating-system motion setting. section 15.1
- Apply !important in the reset layer because important declarations in an earlier layer outrank important declarations in later layers. section 8.1.2
- Limit animation iterations and replace smooth scrolling as well as shortening transition and animation durations. section 15.1
@layer reset {
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
Inspect the complete reset-layer listing and its declarations for animations, transitions, iteration count, and scrolling. section 15.1
