Respecting prefers-reduced-motion
Detect the prefers-reduced-motion media query and disable or reduce animations for users who have requested less motion.
The prefers-reduced-motion Media Feature
Some users experience nausea, dizziness, or seizures from motion in UIs. They set their OS to reduce motion. The prefers-reduced-motion media feature detects this preference so CSS can respond.
Detecting Reduced Motion in CSS
Wrap animations in the opposite query: apply animations normally, then override or disable them for users who prefer less motion.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}All lessons in this course
- CSS Custom Properties: declaring and updating
- Transitions: property duration timing
- @keyframes Animations
- Respecting prefers-reduced-motion