Reduced Motion (prefers-reduced-motion)

Reduced-motion support lets users who are sensitive to animation avoid unnecessary or potentially harmful motion effects. Frontend code can respect the user’s operating-system preference with the `prefers-reduced-motion` media query.

The `prefers-reduced-motion` CSS media feature detects whether the user has requested less non-essential motion. It is commonly used to reduce transitions, animations, parallax effects, and other movement-heavy UI behavior.

A common pattern is to keep the normal animation as the default and override it inside `@media (prefers-reduced-motion: reduce)`. The reduced version should preserve the interface’s meaning and usability rather than simply hiding content.

For CSS animations and transitions, you can shorten or remove motion while retaining an appropriate visual state change. In JavaScript, `window.matchMedia('(prefers-reduced-motion: reduce)')` can be used when behavior cannot be controlled with CSS alone.

Reduced motion is an accessibility consideration, not merely a performance optimization. Avoiding unnecessary animation can also reduce CPU/GPU work in some cases, but the primary goal is to respect a user's motion preference.

Key points

• Use `prefers-reduced-motion: reduce` to respect the user's system preference.
• Prefer CSS media queries for CSS-only animations and transitions.
• Reduce or remove non-essential motion without removing essential information.
• Use `matchMedia()` when JavaScript behavior must respond to the preference.
• Do not assume reduced motion means all visual changes must disappear.

Interview questions

How would you implement reduced motion for a CSS animation?

I would define the normal animation first, then add an `@media (prefers-reduced-motion: reduce)` rule. Inside that rule, I would remove or substantially reduce non-essential animation and transition effects. I would keep the underlying content and state changes available. This keeps the implementation simple and lets the browser follow the user's accessibility preference.

What is `prefers-reduced-motion` and why should a frontend application support it?

`prefers-reduced-motion` is a media feature that exposes the user's preference for reduced non-essential motion. A frontend can use it to reduce or remove animations, transitions, parallax, and similar effects. This improves accessibility for people who are sensitive to motion. The usual approach is to keep the normal experience and provide a reduced-motion alternative.

When would you use `matchMedia()` instead of only CSS?

I would use `matchMedia()` when the motion affects JavaScript behavior rather than only CSS presentation. For example, a JavaScript-driven animation loop may need to stop or switch to a non-animated implementation. `window.matchMedia('(prefers-reduced-motion: reduce)')` provides the current match state. If the preference can change during the session, the media-query object can also be observed for changes.

Should reduced-motion mode remove every animation from an application?

Not necessarily. The goal is to reduce potentially problematic or unnecessary motion while preserving usability and information. Some visual changes can remain if they do not create problematic movement, and essential feedback should not disappear simply because motion is reduced. I would evaluate animations by purpose and provide a meaningful non-motion alternative where appropriate.