Reduce motion for visitors sensitive to animation

Heavy animation can be uncomfortable or confusing for some visitors.

Operating systems provide a setting that communicates a preference for reduced motion.

CSS can detect this preference with prefers-reduced-motion.

First list decorative effects such as moving backgrounds or repeated zooming.

In reduce mode, remove unnecessary motion or duration while keeping content usable.

A message or primary action must not depend only on an animation.

Enable Reduce Motion in the test device settings.

Reopen the page and compare its animation with the normal mode.

Also test scrolling, menus, and forms so reduced motion does not hide controls.

The goal is not to remove every response; it is to calm unnecessary motion while preserving function.

Official sources

• MDN — prefers-reduced-motion
• W3C — Animation from Interactions