Prefers reduced motion

CSS course · Advanced · Lesson 34/52

Learn motion reduction with @media (prefers-reduced-motion).

prefers-reduced-motion

Some users are sensitive to motion; animations can cause dizziness. They turn on a "reduce motion" preference in their system. In CSS you catch this preference with the @media (prefers-reduced-motion: reduce) query.

Inside this block you shorten or completely remove animation durations. The most solid form is animation: none and transition: none; the motion stops entirely while content still works.

Softening the motion

Removing animations entirely is not always what you want; sometimes softening the motion is enough. Then you give a very short duration like transition-duration: 0.01ms; the motion technically exists but is invisible to the eye.

This approach respects the user's reduce-motion preference while still suggesting a transition. Content shows up instantly; predictability improves.

Exercise Write a block that softens motion

Write an @media (prefers-reduced-motion: reduce) block. Inside it, define animation-duration: 0.01ms and transition-duration: 0.01ms on the universal selector *.

Show example solution

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

Test yourself

Which is the most solid form inside a prefers-reduced-motion: reduce block?
- Halve the animation duration
- Stop motion with animation: none and transition: none
- Slow the animation but keep it running
- Only change the background color
Show answer

Stop motion with animation: none and transition: none — Correct. animation: none and transition: none stop motion entirely; content still works.

Write the reduce motion query

@media (____: reduce) {
  * { animation: none; transition: none; }
}

Show answer

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

Match the reduce motion declarations

animation: none

Stop all animation
transition: none

Stop all transition
animation-duration: 0.01ms

Give a very short duration
scroll-behavior: auto

Jump instantly

All lessons in Advanced

Prefers reduced motion