Reduced Motion & Animation Safety

prefers-reduced-motion

Some users get sick from animations. CSS asks politely with a media query.

The idea

@media (prefers-reduced-motion: reduce) disables heavy animation for such users.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

Better structured approach: only animate what's critical

.motion-cheat {
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .motion-cheat {
    transition: none;
    transform: none;
  }
}

Rule of thumb

• Check the USER preference, not a fixed assume.
• Respect built-in reduced-motion settings.
• Provide "calmer" versions, subtle fade beats a bounce when not wanted.

TL;DR

• @media (prefers-reduced-motion: reduce) for accessibility.
• Turn off big spins, slides, and giant transitions.
• Keep tiny opacity fades, usually fine.
• Let users pick motion = a more accessible site!