CSS Reduced Motion

CSS Reduced Motion

CSS can respond when a user has requested less non-essential motion through the prefers-reduced-motion media feature. Websites can use this preference to reduce or replace animations, transitions, movement, and other motion effects.

Supporting reduced motion does not necessarily mean removing every visual effect. The goal is to avoid unnecessary or potentially distracting motion while preserving the content and functionality of the page.

Why Reduce Motion

Animations and movement can improve visual feedback and help explain changes in an interface, but some types of motion can also cause discomfort or make content harder to use for some people.

Large movements, zooming, spinning, parallax effects, and continuously moving content are examples of effects that may be appropriate to reduce when the user has requested less motion.

CSS provides the prefers-reduced-motion media feature so a page can adapt its presentation to that preference.

prefers-reduced-motion

The prefers-reduced-motion media feature detects whether the user has indicated a preference for reducing non-essential motion.

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

When the user's environment reports a reduced-motion preference, the declarations inside this media query are applied.

The preference is commonly controlled through an accessibility or motion setting provided by the operating system. Browsers can use that setting when evaluating the media query.

The reduce Value

The reduce value indicates that the user has requested an interface that minimizes non-essential motion.

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

The media query does not automatically change animations or transitions. It gives the stylesheet a condition that can be used to provide alternative styles.

For example, an animated movement can be removed while a simple color change remains available as visual feedback.

@media (prefers-reduced-motion: reduce) {
  .button {
    transform: none;
    transition: background-color 0.2s;
  }
}

The no-preference Value

The no-preference value indicates that the user has not expressed a preference for reduced motion through this media feature.

@media (prefers-reduced-motion: no-preference) {
  .box {
    animation: move-box 2s ease-in-out infinite alternate;
  }
}

This approach makes the non-animated presentation the default and adds motion only when no reduced-motion preference has been expressed.

Another common approach is to define the normal animation first and then override it inside a reduce media query. Either structure can work when the resulting experience respects the user's preference.

Reducing Animations

CSS animations can be removed or replaced when reduced motion is requested.

.box {
  animation: slide 2s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none;
  }
}

This completely removes the animation for users who prefer reduced motion.

In other situations, a less motion-intensive effect may be a better alternative than removing the visual feedback entirely.

@media (prefers-reduced-motion: reduce) {
  .notification {
    animation: none;
    opacity: 1;
  }
}

The important information remains visible even though its animated entrance has been removed.

Reducing Transitions

Transitions can also create movement, especially when they animate transforms, positions, dimensions, or other properties that visibly move or resize content.

.card {
  transform: scale(1);
  transition: transform 0.4s ease;
}
.card:hover {
  transform: scale(1.1);
}

A reduced-motion rule can remove the scaling transition and use a different visual change instead.

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: background-color 0.2s;
  }
  .card:hover {
    transform: none;
    background-color: #eee;
  }
}

This preserves feedback for the interaction without requiring the card to grow or move.

Replacing Motion

Reduced motion does not always require removing an effect completely. Motion can sometimes be replaced with another visual treatment that communicates the same information.

For example, a button might normally move upward when hovered.

.button:hover {
  transform: translateY(-4px);
}

For reduced motion, the movement could be replaced with a color or border change.

@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: none;
    background-color: #006699;
  }
}

The user still receives visual feedback without the positional movement.

Essential and Non-essential Motion

Not all motion serves the same purpose. Some animation is decorative, while other motion may help communicate a state change, relationship, or important information.

When adapting a page for reduced motion, consider what information the effect communicates before removing it.

If motion is not necessary to understand or operate the interface, it can often be removed or replaced. If an effect communicates useful information, provide that information in a less motion-intensive form when possible.

The reduced-motion preference should not be used to hide content or remove functionality that users need.

Testing Reduced Motion

Reduced-motion styles should be tested with the preference enabled and disabled. This confirms that both versions remain understandable and functional.

Many operating systems provide a setting for reducing interface motion. Browser developer tools may also provide a way to emulate the prefers-reduced-motion media feature.

When testing, look for animations, transitions, scrolling effects, transforms, parallax effects, and other movement that may still occur after the reduced-motion styles are applied.

Also confirm that removing an animation does not accidentally leave important content hidden in its initial state.

Reduced Motion Practices

CSS Reduced Motion Example

The following example normally moves a box from side to side. When the user's environment reports a reduced-motion preference, the animation is removed.

.box {
  animation: move-box 2s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none;
  }
}

Open the example in the editor and compare it with reduced motion enabled and disabled in your system or browser. The box remains visible in both cases, but its continuous movement is removed when reduced motion is requested.