Reduced Motion Demos for WebKit blog post: Responsive Design for Motion

To test these, enable the "Reduce Motion" setting.

Example 1: Using CSS to modify an interaction transition-property

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.

Brody realizing the shark is in the water

Return to WebKit blog post: Responsive Design for Motion