To test these, enable the "Reduce Motion" setting.
iOS: Settings > General > Accessibility > Reduce MotionmacOS: System Preferences > Accessibility > Display > Reduce MotionXcode Accessibility Inspector: Settings > Reduce Motion (see video demo )
Example 1: Using CSS to modify an interaction transition-property
On hover/focus (or tap on mobile), a zoom/scale trigger appears by default,
but it uses a simple dissolve when 'reduce motion' is enabled.
Example 2: Using CSS to disable an ongoing, purely decorative animation
The spinning background animation is stopped entirely if 'reduce motion' is enabled.
Example 3: Using JavaScript to access the current value
Prefers reduced motion:
unsupported 1 Example 4: Only display animated version if prefers-reduced-motion is both supported *and* off.
This example uses a more explicit match for (prefers-reduced-motion: no-preference) which excludes all browsers that don't yet support the new feature.
Return to WebKit blog post: Responsive Design for Motion
