0Pricing
CSS Academy · Lesson

Accessible Animations with prefers-reduced-motion

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

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 */
}

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