CSS Reduced Motion

What Is CSS Reduced Motion?

CSS reduced motion is an accessibility technique that detects when a user has enabled a system preference to reduce motion. This preference is commonly used by people who experience dizziness, nausea, distraction, or discomfort from animations.

The main CSS feature used for this is the prefers-reduced-motion media query.

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

Why Reduced Motion Matters

• Supports users with vestibular disorders or motion sensitivity.
• Reduces dizziness, nausea, and discomfort from motion-heavy effects.
• Improves accessibility for users who prefer calmer interfaces.
• Helps avoid distracting animations during reading or form completion.
• Improves usability for older users and users with cognitive sensitivity.
• Supports WCAG-friendly inclusive design.

CSS Reduced Motion Cheatsheet

The following table explains common motion effects and accessible alternatives.

prefers-reduced-motion Media Query

The prefers-reduced-motion media query checks whether the user has requested reduced motion in their operating system or browser settings.

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

You can also define normal motion styles first, then override them for users who prefer reduced motion.

Safe Global Reduced Motion Pattern

A global reduced motion rule is useful for reducing most animations and transitions. However, avoid breaking important UI state changes. Use this pattern carefully.

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

This keeps layout changes functional while minimizing visible motion.

Reduced Motion for CSS Transitions

Transitions can improve UI polish, but large movement transitions should be reduced for motion-sensitive users.

Default Motion

.panel {
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}

.panel.is-open {
  transform: translateY(0);
  opacity: 1;
}

Reduced Motion Version

@media (prefers-reduced-motion: reduce) {
  .panel {
    transform: none;
    transition: opacity 0.01ms linear;
  }
}

Reduced Motion for CSS Animations

Animations such as bouncing, spinning, sliding, and zooming should be reduced or replaced for users who prefer less motion.

.badge {
  animation: bounce 800ms ease infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

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

Reduced Motion for Smooth Scrolling

Smooth scrolling can be uncomfortable for some users because it creates visible page movement. Disable smooth scrolling when reduced motion is enabled.

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Reduced Motion for Parallax Effects

Parallax effects can be visually impressive, but they are one of the most common motion patterns that can cause discomfort.

.hero {
  background-image: url("/images/hero-bg.jpg");
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    background-attachment: scroll;
  }
}

Reduced Motion for Carousels and Sliders

Carousels should not auto-move for users who prefer reduced motion. Give users control over slide changes.

.carousel-slide {
  transition: transform 300ms ease;
}

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

• Pause autoplay when reduced motion is enabled.
• Provide next and previous buttons.
• Avoid large sliding transitions.
• Use clear focus states for carousel controls.

Using CSS Variables for Motion Preferences

CSS variables make it easier to control motion across a design system.

:root {
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --motion-distance: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --motion-distance: 0;
  }
}

.card {
  transform: translateY(var(--motion-distance));
  transition: transform var(--duration-normal) ease;
}

Accessible Animation Patterns

Not all animation is bad. Small, meaningful animations can help users understand state changes. The goal is to reduce unnecessary movement and provide calmer alternatives.

Reduced Motion and Accessibility

Reduced motion improves accessibility for users with motion sensitivity, vestibular disorders, migraines, attention challenges, and cognitive overload. It also helps users who simply prefer calm interfaces.

• Respect user system preferences.
• Avoid motion that moves large areas of the screen.
• Avoid infinite animations unless essential.
• Give users control over moving content.
• Use static alternatives for decorative motion.

Does Reduced Motion Help SEO?

Reduced motion does not directly rank a page, but it improves accessibility, usability, page quality, and user experience. These improvements can support better engagement and a more professional website.

• Improves inclusive user experience.
• Reduces distraction during reading.
• Improves form completion and task flow.
• Supports better accessibility audits.
• Helps create user-friendly interfaces across devices.

How to Test Reduced Motion

1. Enable reduced motion in your operating system accessibility settings.
2. Reload the page and check animations, transitions, and scrolling.
3. Test menus, dialogs, carousels, accordions, and page transitions.
4. Check that important UI feedback still works.
5. Use browser DevTools to emulate prefers-reduced-motion.
6. Test keyboard navigation and focus states after reducing animations.

Tools for Testing Reduced Motion

Common Reduced Motion Mistakes

• Ignoring the prefers-reduced-motion media query.
• Disabling animations in a way that breaks UI state changes.
• Using infinite animations for decorative elements.
• Keeping parallax effects enabled for all users.
• Using smooth scrolling even when reduced motion is requested.
• Auto-playing carousels without user control.
• Testing only default motion and not reduced motion mode.

CSS Reduced Motion Best Practices

• Use @media (prefers-reduced-motion: reduce).
• Reduce large movement, zooming, spinning, parallax, and smooth scrolling.
• Prefer opacity changes over large transform animations.
• Pause or disable autoplaying carousels.
• Keep important state changes understandable.
• Use CSS variables for animation durations and movement distance.
• Test with reduced motion enabled before publishing.
• Use animation only when it improves understanding, not just decoration.

Key Takeaways

• Reduced motion respects users who prefer less animation.
• The prefers-reduced-motion media query is the main CSS tool for reduced motion.
• Large movement, parallax, smooth scrolling, and infinite animations should be reduced.
• Reduced motion improves accessibility, usability, comfort, and page quality.
• Always test normal motion and reduced motion modes before publishing.