To test these, enable the "Reduce Motion" setting.
- iOS: Settings > General > Accessibility > Reduce Motion
- macOS: System Preferences > Accessibility > Display > Reduce Motion
- Xcode Accessibility Inspector: Settings > Reduce Motion (see video demo)
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.
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