Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

How should prefers-reduced-motion be applied without removing functionality?

Short interview answer

Reduce or remove the motion itself — large translations, parallax, spin — while keeping the underlying state change and any necessary feedback, such as an instant opacity swap instead of a sliding transition.

Example

CSS
@media (prefers-reduced-motion: reduce) {  *, *::before, *::after {    animation-duration: 0.01ms !important;    transition-duration: 0.01ms !important;  }}

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS animations and transitions

Related questions