0Pricing
CSS Academy · Lesson

Accessible Animations with prefers-reduced-motion

Respect accessibility needs by disabling or reducing animations for motion-sensitive users.

Accessible Animations with prefers-reduced-motion is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Reduce Motion?

Some users have vestibular disorders, epilepsy, or other conditions that make animations harmful. CSS provides the prefers-reduced-motion media query to detect and respect their system preference.

The prefers-reduced-motion Query

Query values:

  • no-preference — user has not expressed a preference
  • reduce — user has enabled reduced motion in OS settings
@media (prefers-reduced-motion: reduce) {
  /* apply reduced motion styles here */
}

The Nuclear Option (Not Recommended)

A common but crude implementation that kills all animations. This also removes useful, non-disorienting motion cues:

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

Better: Opt-in Motion

A safer pattern: define animations only for users without motion preferences, leaving the default state motionless:

.btn {
  transition: background 150ms; /* color change is okay */
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 300ms ease; /* only if motion is OK */
  }
}

Swap Animation Types

Replace disorienting motion (translate, scale, rotate) with accessible alternatives (opacity, color) for users who prefer reduced motion:

.card {
  transition: opacity 200ms, background 200ms;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 300ms, box-shadow 300ms;
  }

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

Infinite Animations

Infinite animations (spinners, pulsing) are especially problematic. Provide a static fallback:

.spinner {
  animation: none; /* static by default */
}

@media (prefers-reduced-motion: no-preference) {
  .spinner {
    animation: rotate 1s linear infinite;
  }
}

Parallax Effects

Parallax scrolling can cause severe motion sickness. Always disable it for users preferring reduced motion:

.parallax {
  background-attachment: scroll; /* safe default */
}

@media (prefers-reduced-motion: no-preference) {
  .parallax {
    background-attachment: fixed;
  }
}

JavaScript Access

Check the preference in JavaScript when using the Web Animations API or scroll libraries:

const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (!reducedMotion.matches) {
  // play animation
}

WCAG and Motion

WCAG 2.3.3 (AAA) requires animations triggered by interaction to be disableable. Using prefers-reduced-motion is the recommended CSS approach to meet this criterion.

Testing Reduced Motion

In Chrome DevTools → Rendering tab, enable "Emulate CSS prefers-reduced-motion: reduce" to test without changing OS settings. In macOS: System Preferences → Accessibility → Reduce Motion.

Document the Intent

Comment animations to explain whether they are functional or merely decorative. Functional animations (indicating a process, progress) should have accessible alternatives; decorative ones can simply be removed.

Quick Check

Which approach best handles prefers-reduced-motion for a card hover lift effect?

Recap

Use prefers-reduced-motion: reduce to detect motion sensitivity. Instead of killing all animations, provide a motionless default and opt-in to motion inside no-preference queries. Replace disorienting transform animations with opacity or color transitions for reduced-motion users. Test with DevTools emulation.

Frequently asked questions

Is the “Accessible Animations with prefers-reduced-motion” lesson free?

Yes — the full text of “Accessible Animations with prefers-reduced-motion” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Accessible Animations with prefers-reduced-motion”?

Respect accessibility needs by disabling or reducing animations for motion-sensitive users. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Accessible Animations with prefers-reduced-motion” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. @keyframes Syntax and Animation Property
  2. Animation Direction Fill-Mode and Iteration
  3. Chaining and Sequencing Animations
  4. Accessible Animations with prefers-reduced-motion
← Back to CSS Academy