Reduce motion, keep function

Drop decorative motion; turn functional motion into instant state.

From design-motion-principles, accessibility reference.

Same app, two resets

Open Filters, then simulate reduced motion and try again.

Deletes animationBad

animation: none

Ends on final frameGood

animation-duration: 0.01ms

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

Functional or decorative?

Sort all six, simulate reduced motion, then check.

0 of 6 sorted

Toast slides up

Confetti on payment

Tab indicator glides

Skeleton shimmer

Detail panel slides in

INV-204$1,200.00Due Oct 3

Logo spins

@media (prefers-reduced-motion: no-preference) { .confetti { animation: burst 900ms; } }
@media (prefers-reduced-motion: reduce) { .toast, .tab-indicator { transition: none; } }

Every loop needs a pause

Simulate reduced motion: only the good feed stops.

Loops foreverBad

requestAnimationFrame

Pauses, honors settingGood

Playing.

animation-play-state: paused

.feed[data-paused="true"] .ticker { animation-play-state: paused; }
if (matchMedia("(prefers-reduced-motion: reduce)").matches) pause();

Why it matters

The setting asks for less movement, not less information. Drop the travel.

Pros

Every task stays completable.
Animations still land on their final frame.
Pause controls help everyone near a loop.

Cons

The global net also flattens motion worth softening.
CSS never reaches rAF, scroll or spring motion.
!important fights component libraries.