Goal
Ensure that animations triggered by user actions (like hover, click, or scroll) can be disabled if the user has motion sensitivity or prefers reduced motion.
Key Points
- Applies to animations that move, scale, fade, or rotate elements when users interact.
- Users who experience motion sickness or vestibular disorders can be disoriented by sudden movement.
- Must respect the system setting:
@media (prefers-reduced-motion: reduce) { ... } - Animation should be decorative, not essential for understanding or function.
Short Summary
Any animations caused by user interaction must have a reduced-motion fallback. If motion is not critical, simplify or remove it when the user opts out.
Example Issue and Fix
Interactive card with intense spin animation
Fail
<div class="flex w-full flex-col items-center justify-center gap-4 p-8 text-center">
<div class="font-medium text-gray-700">Hover card (unsafe for motion-sensitive users):</div>
<div class="flex h-40 w-40 items-center justify-center rounded-lg bg-blue-600 text-lg font-semibold text-white animate-spin-on-hover">Hover Me</div>
</div>
<style>
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Tailwind-style class name with colon escaped */
.animate-spin-on-hover:hover {
animation: spin 1s linear infinite;
transform-origin: center;
}
</style>Hover card (unsafe for motion-sensitive users):
Hover Me
Pass
<div class="flex w-full flex-col items-center justify-center gap-4 p-8 text-center">
<div class="font-medium text-gray-700">Accessible hover card (respects reduced motion):</div>
<div class="flex h-40 w-40 items-center justify-center rounded-lg bg-blue-600 text-lg font-semibold text-white transition-transform duration-500 hover:scale-105 focus:scale-105 focus:ring-2 focus:ring-blue-400 focus:outline-none">Hover Me</div>
</div>
<style>
@media (prefers-reduced-motion: reduce) {
.transition-transform,
.hover\:scale-105:focus,
.hover\:scale-105:hover {
transition: none !important;
transform: none !important;
}
}
</style>Accessible hover card (respects reduced motion):
Hover Me
Quick Checklist
- All interaction-based animations are optional
- Motion effects respect the
prefers-reduced-motionsetting - Avoid large or fast movement (especially on hover/scroll)
- Use fade, color, or scale transitions instead of rotations or parallax
- Animations are decorative, not essential for understanding content
- No inline JavaScript or non-CSP-safe animation triggers