4 <title>Demo: prefers-reduced-motion media query</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <style type="text/css">
9 font: -apple-system-body;
20 -webkit-appearance: none;
21 border: solid 1px black;
23 background-color: white;
36 background-color: rgba(255,100,100,0.3);
37 transition-duration: 0.4s;
38 transition-timing-function: ease-in-out;
40 /* Example 1: This value will be modified when 'reduce motion' is enabled. */
41 transition-property: top left width height opacity;
43 @media (prefers-reduced-motion) {
45 /* Example 1: Now only animating the opacity... not size or position, which control the scale effect. */
46 transition-property: opacity;
49 button:hover::before, button:focus::before {
62 border: solid 1px black;
69 @keyframes animation-twirl {
71 transform: rotate(0deg);
74 transform: rotate(360deg);
86 background: repeating-linear-gradient(140deg, rgba(0,0,0,0), rgba(0,0,0,0) 10px, rgba(200,200,200,0.3) 10px, rgba(200,200,200,0.3) 20px);
87 background-size: cover;
89 animation: animation-twirl 100s infinite;
92 /* Example 2: Disabling a ongoing, decorative background animation. */
93 @media (prefers-reduced-motion) {
100 #indicator #prmValue {
101 display: inline-block;
102 padding: 0.2em 0.4em;
103 text-transform: uppercase;
104 border: solid 1px #666;
105 background-color: #eee;
108 text-decoration: none;
115 <h1>Reduced Motion Demos for WebKit blog post: <a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion</a></h1>
117 <p>To test these, enable the "Reduce Motion" setting.</p>
119 <li><strong>iOS:</strong> Settings > General > Accessibility > Reduce Motion</li>
120 <li><strong>macOS:</strong> System Preferences > Accessibility > Display > Reduce Motion</li>
121 <li><strong>Xcode Accessibility Inspector:</strong> Settings > Reduce Motion (<a href="./axi.htm">see video demo</a>)</li>
124 <h2>Example 1: Using CSS to modify an interaction transition-property</h2>
125 <!-- Check the 'button::before' blocks in the CSS. -->
128 On hover/focus (or tap on mobile), a zoom/scale trigger appears by default,
129 but it uses a simple dissolve when 'reduce motion' is enabled.
133 <h2>Example 2: Using CSS to disable an ongoing, purely decorative animation</h2>
134 <!-- Check the '#twirl::after' blocks in the CSS. -->
137 The spinning background animation is stopped entirely if 'reduce motion' is enabled.
142 <h2>Example 3: Using JavaScript to access the current value</h2>
143 <div id="indicator">Prefers reduced motion: <span id="prmValue">unsupported</span> <a href="https://webkit.org/b/168491" title="Outstanding bug: 168491" aria-label="Outstanding bug: 168491"><sup>1</sup></a></div>
145 <script type="text/javascript">
147 var motionQuery = matchMedia('(prefers-reduced-motion)');
148 function handleReduceMotionChanged() {
149 document.getElementById('prmValue').innerText = motionQuery.matches ? 'on' : 'no-preference or unsupported';
151 handleReduceMotionChanged(); // trigger this once on load to set up the initial value
152 motionQuery.addListener(handleReduceMotionChanged); // Note: https://webkit.org/b/168491
157 <h2>Example 4: Only display animated version if prefers-reduced-motion is both supported *and* off.</h2>
158 <p>This example uses a more explicit match for <code>(prefers-reduced-motion: no-preference)</code> which excludes all browsers that don't yet support the new feature.</p>
159 <img id="jaws" src="jaws.jpg" alt="Brody realizing the shark is in the water" width="480" height="214">
161 <script type="text/javascript">
163 var motionQuery2 = matchMedia('(prefers-reduced-motion: no-preference)');
164 function handleReduceMotionChanged2() {
165 document.images['jaws'].src = motionQuery2.matches ? 'jaws.gif' : 'jaws.jpg';
167 handleReduceMotionChanged2(); // trigger this once on load to set up the initial value
168 motionQuery.addListener(handleReduceMotionChanged2); // Note: https://webkit.org/b/168491
172 <p>Return to WebKit blog post: <a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion</a></p>