Respecting reduced motion in CSS

Every animation needs an off switch for readers who ask for one.

.celebrate {
  animation: xp-pop 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

How it works

1. prefers-reduced-motion: reduce is a real user setting.
2. Cut the motion but keep the state change visible.
3. Setting a near-zero duration is gentler than removing the rule.

Keywords and builtins used here

• animation
• celebrate
• media
• ms

The run, in numbers

Lines

14

Characters to type

230

Tokens

49

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 33 seconds.

Type this snippet

Step 7 of 8 in Motion & effects, step 17 of 21 in Responsive & modern CSS.

← Previous Next →