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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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 preferencereduce— user has enabled reduced motion in OS settings
<div class="box"></div>
The Nuclear Option (Not Recommended)
A common but crude implementation that kills all animations. This also removes useful, non-disorienting motion cues:
<div class="box"></div>
Better: Opt-in Motion
A safer pattern: define animations only for users without motion preferences, leaving the default state motionless:
<button class="btn">Button</button>
<div class="card">Card</div>
Swap Animation Types
Replace disorienting motion (translate, scale, rotate) with accessible alternatives (opacity, color) for users who prefer reduced motion:
<div class="card demo-hover">Hover me</div>
Infinite Animations
Infinite animations (spinners, pulsing) are especially problematic. Provide a static fallback:
<div class="spinner"></div>
Parallax Effects
Parallax scrolling can cause severe motion sickness. Always disable it for users preferring reduced motion:
<div class="parallax">Parallax section</div>
JavaScript Access
Check the preference in JavaScript when using the Web Animations API or scroll libraries:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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
- @keyframes Syntax and Animation Property
- Animation Direction Fill-Mode and Iteration
- Chaining and Sequencing Animations
- Accessible Animations with prefers-reduced-motion