CodePark/ questions / Transitions & animations
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Transitions & animations

What is prefers-reduced-motion and how should you use it?

.hero { animation: slide-in 600ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

prefers-reduced-motion is a media feature that tells you if the user has turned on "reduce motion" in their operating system. People with vestibular disorders, which are inner-ear balance problems, can feel dizzy or sick from large movement, parallax and zoom effects.

When it is reduce, remove or soften motion that isn't essential:

  • Replace slides and zooms with a fade or an instant change.
  • Stop loops that play automatically.
  • Turn off smooth scrolling.

You don't have to remove all feedback, only large or unexpected movement.

Another way is to write motion only inside @media (prefers-reduced-motion: no-preference). Then motion is opt-in. JavaScript animations should check matchMedia("(prefers-reduced-motion: reduce)") too. WCAG (Web Content Accessibility Guidelines) also has related rules about pausing moving content and about motion triggered by interaction.

  • It reflects the user's reduce-motion setting in the operating system.
  • It protects users with vestibular (balance) disorders.
  • Replace big motion with fades or no motion.
  • Check it in JavaScript with matchMedia too.