Respect reduced motion

Apply optional motion only when it is welcome:

<div class="motion-safe:transition motion-safe:hover:scale-105 motion-reduce:transform-none">...</div>

motion-safe: applies only when the visitor has not requested reduced motion. This is often simpler than defining animation by default and trying to undo every transform, duration, and transition later.

For an existing animation that must retain a reduced alternative, use motion-reduce: deliberately:

<svg class="animate-spin motion-reduce:hidden" aria-hidden="true">...</svg>
<span>Saving</span>

The visible text preserves the status when the decorative spinner disappears.

Reduced motion does not always mean “remove every transition.” Eliminate non-essential movement, parallax, large zooms, continuous animation, and vestibular triggers. A short opacity change may remain acceptable, but the interface must not require animation to explain where content went.

Avoid motion that delays input or completion. A duration-700 class is not proof that a transition improves comprehension. State should update immediately and remain clear if animations fail to run.

Test the real media feature through the operating system or browser emulation. Also test keyboard focus during transitions: an element that moves away while focused can be disorienting.

Motion preferences belong with other accessibility conditions, not in a separate afterthought. Review hover transforms, loading indicators, page transitions, accordions, auto-scrolling, and animated charts together.

Your action is to audit one component with at least two animations. Enable reduced motion, preserve every piece of information and functionality, and explain why each remaining transition is necessary.