Skip to content

Commit

Permalink
Add support for prefers-reduced-motion media query (#832)
Browse files Browse the repository at this point in the history
Feat: add prefers-reduced-motion media query

Improve accessibility by respecting the user's preference
  • Loading branch information
marcysutton authored and daneden committed Jul 23, 2018
1 parent be8582a commit 940e4ae
Show file tree
Hide file tree
Showing 6 changed files with 1,477 additions and 1,461 deletions.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
123 changes: 66 additions & 57 deletions animate.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%,
Expand Down Expand Up @@ -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;
}
}
2 changes: 1 addition & 1 deletion animate.min.css

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function activateAnimations() {
category,
files,
file,
target = ['source/_base.css'],
target = [],
count = 0;

for (category in categories) {
Expand All @@ -94,6 +94,8 @@ function activateAnimations() {
}
}
}
// prepend base CSS
target.push('source/_base.css');

if (!count) {
gutil.log('No animations activated.');
Expand Down
Loading

0 comments on commit 940e4ae

Please sign in to comment.