prefers-reduced-motion in CSS and JS
Detect and honor the user motion setting.
prefers-reduced-motion in CSS and JS is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 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 Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
A Setting You Can Read
Operating systems let people ask for less motion. The prefers-reduced-motion media feature exposes that choice straight to your site. 🎚️
Where Users Turn It On
People flip reduce motion in OS settings on macOS, iOS, Windows, and Android. Your job is to listen, not to second-guess the choice.
Two Values
The feature reports one of two states. It is either reduce, meaning calm the animations down, or no-preference for everyone else.
Query It in CSS
Wrap calming styles in a media query. When a user asks to reduce motion, you can cut transitions to almost nothing.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Reduce, Do Not Always Remove
Calming motion does not mean a frozen page. Swap a big slide for a gentle fade so the interface still feels alive but never lurches.
Design Motion-On First
Build your normal animated styles, then add the query to scale them back. This progressive approach keeps the default experience rich.
Read It in JavaScript
For scripted animations, ask the browser directly. matchMedia returns whether the user prefers reduced motion right now.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }React to Live Changes
People can toggle the setting mid-session. Listen for changes so your JavaScript animations respect the new preference without a reload.
mq.addEventListener('change', e => updateMotion(e.matches));Cover Scroll Behavior
Smooth scrolling counts as motion too. Inside the query, set scroll-behavior to auto so jumps are instant for those who asked.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}It Is a Real Need
This is not a nice-to-have toggle. For some users, big motion causes real nausea or dizziness, so honoring the request matters.
Default Off Is Safest
When unsure, treat the safest path as the default. Leaning toward calm motion harms nobody and keeps the page comfortable for all.
Quick Check
How does a website learn that a user wants less motion?
Recap
Read prefers-reduced-motion in CSS or with matchMedia, then calm animations instead of killing the page. Honor live toggles too. ✅
Frequently asked questions
Is the “prefers-reduced-motion in CSS and JS” lesson free?
Yes — the full text of “prefers-reduced-motion in CSS and JS” is free to read here on the web, and the Web Accessibility 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 Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “prefers-reduced-motion in CSS and JS”?
Detect and honor the user motion setting. You practise Web Accessibility 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 Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “prefers-reduced-motion in CSS and JS” 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 Web Accessibility Academy lesson?
Yes. Every Web Accessibility 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
- prefers-reduced-motion in CSS and JS
- Vestibular Disorders and Parallax Risks
- The Three-Flash Threshold for Seizures
- Pause, Stop, Hide for Auto-Moving Content