CssHow-ToBeginner · 3 min read

How to Use prefers-reduced-motion in CSS for Accessible Animations

Use the @media (prefers-reduced-motion: reduce) CSS media query to detect if a user prefers less motion. Inside this block, you can disable or simplify animations and transitions to make your site more comfortable for sensitive users.

📐

Syntax

The prefers-reduced-motion media feature checks if the user has requested reduced motion in their system settings. It accepts two values:

no-preference: The user has no preference for reduced motion.
reduce: The user prefers reduced motion.

You use it inside a media query like this:

css

@media (prefers-reduced-motion: reduce) {
  /* CSS rules to reduce motion */
}

💻

Example

This example shows a simple animation that moves a box from left to right. When the user prefers reduced motion, the animation is turned off and the box stays still.

css

div.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  position: relative;
  animation: moveRight 3s infinite alternate;
}

@keyframes moveRight {
  from { left: 0; }
  to { left: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  div.box {
    animation: none;
  }
}

Output

A green square box that moves left to right smoothly every 3 seconds. If the user sets reduced motion in their system, the box stays still without animation.

⚠️

Common Pitfalls

Some common mistakes when using prefers-reduced-motion include:

Not disabling all animations or transitions inside the media query, leaving some motion active.
Using JavaScript animations without checking for this preference, which can cause discomfort.
Assuming all users want no motion; always provide a default animation for users without this preference.

Here is a wrong and right way to handle it:

css

/* Wrong: Only disabling some animations */
@media (prefers-reduced-motion: reduce) {
  .fade {
    animation: none;
  }
  /* .slide animation still runs, causing motion */
}

/* Right: Disable all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

📊

Quick Reference

Use this cheat sheet to remember how to apply prefers-reduced-motion:

Feature	Description	Example
prefers-reduced-motion	Detects user preference for reduced motion	@media (prefers-reduced-motion: reduce) { ... }
reduce	User prefers less motion	animation: none; transition: none;
no-preference	User has no motion preference	Default animations run
Disable animations	Stop animations for reduced motion users	animation: none;
Disable transitions	Stop transitions for reduced motion users	transition: none;

✅

Key Takeaways

Use @media (prefers-reduced-motion: reduce) to respect user motion preferences.

Disable or simplify animations and transitions inside this media query.

Test your site with reduced motion settings enabled to ensure comfort.

Don’t forget to handle JavaScript animations accordingly.

Provide default animations only for users without reduced motion preference.