meet it

Turn big movement off for people who asked for less.

For some people, movement on a screen brings on dizziness, sickness or headaches. They can switch on a reduce motion setting on their phone or computer. means building pages that work for them too.

applies when that setting is on. Inside it, turn big movement off with animation: none, or swap it for a gentle fade. Small colour changes are usually fine.

The preview follows your own device's setting, so you may not see a difference. The checks read your CSS instead.

<div class="banner">Summer sale</div>

@keyframes slide {
  from { translate: -40px 0; }
  to { translate: 0 0; }
}
.banner {
  animation: slide 0.8s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .banner {
    animation: none;
  }
}

Press show my page to see it here.

guess first

Reduce motion is switched on. What does the banner do?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="hero">Welcome</div>

@keyframes float {
  to { translate: 0 -20px; }
}
@keyframes fade {
  to { opacity: 0.4; }
}
.hero {
  animation: float 2s infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero {
    animation-name: fade;
  }
}

your turn

Your turn. Calm the bouncing arrow.

Fill in the media query so the arrow stops bouncing for visitors who asked their device for less motion.

the page you’re styling

<span class="arrow">↓</span>

your css

Your code

Press show my page to see it here.

the query asks for reduced motionnot checked yet
the arrow stops inside the querynot checked yet

fix it

The spinner stops for the wrong people. Can you fix it?

the page you’re styling

<div class="spinner"></div>

your css

Broken code to fix

Press show my page to see it here.

the query targets reduced motionnot checked yet

Read the media query out loud. Who does it switch the spinner off for?
no-preference means people who did not ask for less motion, so they lose the spinner.
Change no-preference to reduce, then press run.

nailed it

you made motion kind to everyone. :D

Movement on screens makes some people dizzy or sick.
prefers-reduced-motion: reduce means they asked for less.
Switch big movement off there and keep small changes.

new words in your collection

accessibility
prefers-reduced-motion

This lesson isn’t saved. A free account remembers every lesson you finish.