Reduced Motion

Reduced Motion

Respecting reduced-motion preferences prevents decorative transitions from becoming uncomfortable or distracting for users who request less animation.

Core concept

Explain prefers-reduced-motion, transition/animation behavior, carousel motion, collapse transitions, and how custom animations should be disabled or simplified when appropriate.

Using it in a real interface

Create a small custom transition and show how a media query can reduce it. Explain that reduced motion does not mean the interface must lose feedback; state changes can remain visible without excessive movement.

Implementation notes

Test both normal and reduced-motion settings. Pay special attention to auto-rotating content and large sliding panels.