Respect reduced motion

Some visitors turn on “Reduce motion” in their operating system. Animations that feel playful to you can make them dizzy or nauseous. Tailwind gives you two variants to respect that setting: motion-safe: and motion-reduce:.

My preferred approach is to add motion only when it’s welcome:

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

motion-safe: matches when the visitor has not asked for reduced motion. The card scales up on hover for them, and stays still for everyone else. This is easier than animating by default and then trying to undo every transform, duration, and transition with motion-reduce: later.

In the generated CSS, motion-safe: wraps the rule in @media (prefers-reduced-motion: no-preference) and motion-reduce: in @media (prefers-reduced-motion: reduce).

Providing an alternative

Sometimes an animation carries information, like a loading spinner. Then you need a reduced version that keeps the message:

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

With reduced motion on, the spinner disappears and the text “Saving” still tells the visitor what’s happening. Never remove an indicator without leaving the information behind.

Reduced doesn’t mean zero

Reduced motion doesn’t require killing every transition. Remove the things that trigger discomfort: parallax, large zooms, sliding panels, continuous animation, anything that moves a lot of the screen. A short fade in opacity is usually fine. What the interface must never do is rely on animation to explain where something went.

Motion shouldn’t slow people down

A duration-700 transition isn’t proof that the animation helps. It’s 700 milliseconds where the user waits. Keep transitions around 150 to 300ms, update the state immediately, and make sure everything is clear if the animation never runs at all.

How to test

Turn on the real setting in your OS (on macOS: System Settings, Accessibility, Display, Reduce motion), or emulate prefers-reduced-motion in the DevTools Rendering panel. Also press Tab during a transition. An element that slides away while it has focus is disorienting.

Treat motion as part of accessibility, not a separate polish pass. Review hover transforms, loading indicators, page transitions, accordions, auto-scrolling, and animated charts together.

Try this: audit one component with at least two animations. Turn on reduced motion, keep every piece of information and every function working, and write down why each remaining transition is necessary.