Allow animations, scrolling effects, and transitions to be reduced in all browsers

Author: jonathantneal

README.md

@@ -45,6 +45,16 @@ A separate stylesheet that normalizes typography using system interface fonts.
 
 [Learn more about `typography.css`](#typography).
 
+#### Reduce Motion CSS
+
+A separate stylesheet that normalizes typography using system interface fonts.
+
+```html
+<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />
+```
+
+[Learn more about `reduce-motion.css`](#reduce-motion).
+
 #### Page CSS
 
 A separate stylesheet that applies a comfortable measure to plain documents.
@@ -397,6 +407,36 @@ code, kbd, pre, samp {
 }
 ```
 
+## Reduce Motion
+
+[sanitize.css] includes a separate stylesheet for restricting motion when the
+user has requested this at a system level.
+
+```html
+<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
+<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />
+```
+
+### Reduce Motion Features
+
+##### Animations, scrolling effects, and transitions are reduced in all browsers
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
+}
+```
+
 ## Contributing
 
 Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the

reduce-motion.css

@@ -0,0 +1,20 @@
+/*
+* 1. Remove animations when motion is reduced (opinionated).
+* 2. Remove fixed background attachments when motion is reduced (opinionated).
+* 3. Remove timed scrolling behaviors when motion is reduced (opinionated).
+* 4. Remove transitions when motion is reduced (opinionated).
+*/
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important; /* 1 */
+    animation-duration: 1ms !important; /* 1 */
+    animation-iteration-count: 1 !important; /* 1 */
+    background-attachment: initial !important; /* 2 */
+    scroll-behavior: auto !important; /* 3 */
+    transition-delay: 0s !important; /* 4 */
+    transition-duration: 0s !important; /* 4 */
+  }
+}