Animation can explain a transition, draw attention to a change, or make an interface feel responsive. It can also make an experience uncomfortable or distracting for people who prefer less movement.
A reduced-motion design should preserve the information an animation communicates while changing how that information appears. This requires reviewing the purpose of individual effects, rather than treating every animation as decoration.
Respect the user’s preference
The CSS prefers-reduced-motion media feature detects whether a user has requested less non-essential motion through device settings. MDN documents the reduce and no-preference values.
The feature can support removing, reducing, or replacing motion. It is therefore useful for more than switching every animation off indiscriminately.
For example, a panel that normally slides into view can appear directly in its final position. The panel remains available without requiring the same movement across the screen.
Separate function from presentation
W3C’s explanation of WCAG success criterion 2.3.3 addresses animation triggered by interaction. It describes allowing such motion to be disabled unless it is essential to the functionality or information conveyed. This particular criterion is Level AAA.
For each effect, ask what the user learns from it. If a card moves into a selected area, the important information may be that selection succeeded. A clear selected state can communicate that result without travel across the page.
Do not remove the confirmation along with the motion.
Implement changes at the component level
A targeted rule is easier to review than a global override with unknown consequences:
@media (prefers-reduced-motion: reduce) {
.menu-panel {
transition: none;
}
.decorative-orbit {
animation: none;
}
}This example assumes those animations are presentational and the components remain functional without them. Test that assumption in the actual interface.
An application may also contain motion created by JavaScript or embedded components. A CSS rule affecting two classes does not establish that the entire experience respects the preference.
Test complete tasks
Enable reduced motion and navigate through the main user journeys. Open menus, submit forms, change tabs, dismiss dialogs, and trigger loading states.
Watch for components that disappear without explanation or wait for an animation event before completing a task. The reduced-motion path should reach the same usable state.
Also inspect large background movements, zoom effects, and animated scrolling. Effects that seem subtle in a design preview may become more noticeable when repeated across a long page.
Make the preference part of maintenance
Add reduced-motion behavior to component documentation. When designers introduce a new transition, ask them to specify the corresponding reduced-motion presentation at the same time.
Review third-party components before adopting them, particularly where they control major interactions. Record what the team has tested instead of assuming a setting is supported.
A thoughtful reduced-motion experience retains hierarchy, feedback, and orientation. The design remains expressive through spacing, contrast, text, and state changes, while giving users meaningful control over movement.
