Add support for prefers-reduced-motion media query (#832)

Feat: add prefers-reduced-motion media query Improve accessibility by respecting the user's preference
animate-css · Jul 23, 2018 · 940e4ae · 940e4ae
1 parent be8582a
commit 940e4ae
Show file tree

Hide file tree

Showing 6 changed files with 1,477 additions and 1,461 deletions.
diff --git a/README.md b/README.md
@@ -261,6 +261,10 @@ Next, run `gulp` to compile your custom builds. For example, if you want only so
 }
 ```
 
+## Accessibility
+
+Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently only OSX Safari and iOS Safari), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
+
 ## License
 
 Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)

diff --git a/animate.css b/animate.css
@@ -8,63 +8,6 @@
  * Copyright (c) 2018 Daniel Eden
  */
 
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-.animated.infinite {
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
-.animated.delay-1s {
-  -webkit-animation-delay: 1s;
-  animation-delay: 1s;
-}
-
-.animated.delay-2s {
-  -webkit-animation-delay: 2s;
-  animation-delay: 2s;
-}
-
-.animated.delay-3s {
-  -webkit-animation-delay: 3s;
-  animation-delay: 3s;
-}
-
-.animated.delay-4s {
-  -webkit-animation-delay: 4s;
-  animation-delay: 4s;
-}
-
-.animated.delay-5s {
-  -webkit-animation-delay: 5s;
-  animation-delay: 5s;
-}
-
-.animated.fast {
-  -webkit-animation-duration: 800ms;
-  animation-duration: 800ms;
-}
-
-.animated.faster {
-  -webkit-animation-duration: 500ms;
-  animation-duration: 500ms;
-}
-
-.animated.slow {
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
-}
-
-.animated.slower {
-  -webkit-animation-duration: 3s;
-  animation-duration: 3s;
-}
-
 @-webkit-keyframes bounce {
   from,
   20%,
@@ -3612,3 +3555,69 @@
   -webkit-animation-name: slideOutUp;
   animation-name: slideOutUp;
 }
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.delay-1s {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.animated.delay-2s {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+
+.animated.delay-3s {
+  -webkit-animation-delay: 3s;
+  animation-delay: 3s;
+}
+
+.animated.delay-4s {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+}
+
+.animated.delay-5s {
+  -webkit-animation-delay: 5s;
+  animation-delay: 5s;
+}
+
+.animated.fast {
+  -webkit-animation-duration: 800ms;
+  animation-duration: 800ms;
+}
+
+.animated.faster {
+  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
+}
+
+.animated.slow {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.slower {
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+}
+
+@media (prefers-reduced-motion) {
+  .animated {
+    -webkit-animation: unset !important;
+    animation: unset !important;
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
diff --git a/animate.min.css b/animate.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -78,7 +78,7 @@ function activateAnimations() {
     category,
     files,
     file,
-    target = ['source/_base.css'],
+    target = [],
     count = 0;
 
   for (category in categories) {
@@ -94,6 +94,8 @@ function activateAnimations() {
       }
     }
   }
+  // prepend base CSS
+  target.push('source/_base.css');
 
   if (!count) {
     gutil.log('No animations activated.');