Tailwind CSS
tailwind/motion-safe
Decorative Tailwind animations (animate-bounce, animate-ping, animate-pulse) run under motion-safe: or stop under motion-reduce:.
drobnastatycznefe-tailwind
Dlaczego
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.
Poprawka
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:.
Przykłady
<!-- bad -->
<span class="animate-ping rounded-full bg-sky-400"></span>
<!-- good -->
<span class="motion-safe:animate-ping rounded-full bg-sky-400"></span>Źródła
Fakty
- Identyfikator
tailwind/motion-safe- Waga
- drobna
- Sprawdzanie
- statyczne sprawdzane w kodzie źródłowym przez
audit - Dotyczy plików
htmlangularvuesvelteastrojsx- Tylko w projektach z
tailwind- Uczy jej skill
fe-tailwindTailwind CSS- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain tailwind/motion-safe