mirror of
https://github.com/animate-css/animate.css.git
synced 2024-09-29 22:41:31 +02:00
Add support for prefers-reduced-motion media query (#832)
Feat: add prefers-reduced-motion media query Improve accessibility by respecting the user's preference
This commit is contained in:
parent
be8582afbb
commit
940e4aef81
@ -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
|
## License
|
||||||
|
|
||||||
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
|
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
|
||||||
|
123
animate.css
vendored
123
animate.css
vendored
@ -8,63 +8,6 @@
|
|||||||
* Copyright (c) 2018 Daniel Eden
|
* 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 {
|
@-webkit-keyframes bounce {
|
||||||
from,
|
from,
|
||||||
20%,
|
20%,
|
||||||
@ -3612,3 +3555,69 @@
|
|||||||
-webkit-animation-name: slideOutUp;
|
-webkit-animation-name: slideOutUp;
|
||||||
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
animate.min.css
vendored
2
animate.min.css
vendored
File diff suppressed because one or more lines are too long
@ -78,7 +78,7 @@ function activateAnimations() {
|
|||||||
category,
|
category,
|
||||||
files,
|
files,
|
||||||
file,
|
file,
|
||||||
target = ['source/_base.css'],
|
target = [],
|
||||||
count = 0;
|
count = 0;
|
||||||
|
|
||||||
for (category in categories) {
|
for (category in categories) {
|
||||||
@ -94,6 +94,8 @@ function activateAnimations() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// prepend base CSS
|
||||||
|
target.push('source/_base.css');
|
||||||
|
|
||||||
if (!count) {
|
if (!count) {
|
||||||
gutil.log('No animations activated.');
|
gutil.log('No animations activated.');
|
||||||
|
2792
package-lock.json
generated
2792
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -42,3 +42,10 @@
|
|||||||
.animated.slower {
|
.animated.slower {
|
||||||
animation-duration: 3s;
|
animation-duration: 3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
.animated {
|
||||||
|
animation: unset !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user