What is Reduced motion?
Also called: prefers-reduced-motion
The short answer
Reduced motion is a device setting people turn on when animation makes them dizzy or distracted; sites should honour it by toning down or removing non-essential motion.
Reduced motion, explained
The prefers-reduced-motion media query detects it. Motion-rich sites stay usable by offering an elegant still version.
Questions people ask about Reduced motion
What is Reduced motion?
Reduced motion is a device setting people turn on when animation makes them dizzy or distracted; sites should honour it by toning down or removing non-essential motion.
Related terms
A media query is a CSS rule that applies styles only when conditions are met, such as a screen width, dark mode preference or reduced-motion setting.
Parallax scrollingParallax scrolling moves background and foreground layers at different speeds as you scroll, creating an illusion of depth.
Micro-interactionsMicro-interactions are small, single-purpose animations that respond to what a visitor does, like a button that presses in, a heart that fills or a field that shakes on an error.
Web accessibilityWeb accessibility means building sites everyone can use, including people who are blind, deaf, have limited movement or cognitive differences, whatever device or assistive technology they use.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.