prefers-reduced-motion

Checks whether the user asked for less animation.

What does prefers-reduced-motion do?

prefers-reduced-motion checks whether the user has asked their device for less animation. Respect it: motion can make some people unwell.

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

Level: Journeyman · More CSS terms at this level

Updated September 27, 2026