tailwind/motion-safe

Why

People with vestibular disorders turn on "reduce motion" because bouncing, pulsing and zooming elements can cause dizziness and nausea. A Tailwind animate-* class ignores that setting unless you ask for it.

Fix

Prefix decorative animations with motion-safe: (motion-safe:animate-bounce), or stop them with motion-reduce:animate-none. A loading spinner (animate-spin) may keep running, since it tells the user something is happening; consider a slower or static indicator under motion-reduce:.

Examples

<!-- bad -->
<span class="animate-ping rounded-full bg-sky-400"></span>
<!-- good -->
<span class="motion-safe:animate-ping rounded-full bg-sky-400"></span>

Sources

• Tailwind CSS docs, Hover, focus and other states (prefers-reduced-motion)
• MDN, prefers-reduced-motion
• WCAG 2.2, Understanding SC 2.3.3 Animation from Interactions

Read it in the terminal

npx github:dawidolko/frontend-skills explain tailwind/motion-safe