Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Some people get dizzy from animations
Detects user's system preference
Reduce or remove animations for these users
Simple @media query to use
Shows you care about accessibility
Required for inclusive websites
User hasn't set any preference
Show normal animationsUser wants less motion
Remove or minimize animationsRespecting this preference is important
Makes your site usable for everyoneUsers set this in OS accessibility settings
Mac: System Preferences → Accessibility → Display/* Normal animations for everyone */
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.1) rotate(5deg);
}
/* Remove animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.box {
transition: none;
}
.box:hover {
transform: none;
}
}/* Universal solution - turns off all animations */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}/* Instead of removing completely, use subtle motion */
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
/* Reduced motion: just fade, no movement */
@media (prefers-reduced-motion: reduce) {
.card {
transition: opacity 0.3s ease;
}
.card:hover {
transform: none;
opacity: 0.9;
}
}<div class="container">
<h2>Hover over these cards</h2>
<p class="hint">Enable "Reduce Motion" in your OS to see the difference</p>
<div class="cards">
<div class="card card-1">
<div class="icon">🎬</div>
<h3>Normal Motion</h3>
<p>Scales and rotates on hover</p>
</div>
<div class="card card-2">
<div class="icon">✨</div>
<h3>Bouncy Animation</h3>
<p>Bounces continuously</p>
</div>
<div class="card card-3">
<div class="icon">🌈</div>
<h3>Slide Effect</h3>
<p>Slides up on hover</p>
</div>
</div>
<div class="info-box">
<strong>With Reduced Motion:</strong> All animations are disabled or minimized
</div>
</div>Loading preview...
<div class="container">
<nav class="nav">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<section id="section1" class="section">
<h2>Section 1</h2>
<p>Click the navigation links above</p>
</section>
<section id="section2" class="section">
<h2>Section 2</h2>
<p>Notice the smooth scroll effect</p>
</section>
<section id="section3" class="section">
<h2>Section 3</h2>
<p>With reduced motion, it jumps instantly</p>
</section>
</div>Loading preview...
All CSS animations and keyframes
Hover effects and state changes
Smooth scrolling and parallax effects
Scale, rotate, and translate effects
🍎 Mac: System Preferences → Accessibility → Display → Reduce motion
🪟 Windows: Settings → Ease of Access → Display → Show animations
🤖 Android: Settings → Accessibility → Remove animations
🍏 iOS: Settings → Accessibility → Motion → Reduce Motion
✅ Excellent Support: prefers-reduced-motion works in all modern browsers including Chrome, Firefox, Safari, and Edge. It's widely supported and safe to use!