文档翻译---1、Animate.css
一、总结
一句话总结：
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
1、animate.css v4 is in the work with lots of improvements and some breaking changes, including CSS custom properties support (aka CSS variables) and classes prefix for a safer use. ？
some breaking changes
CSS custom properties support
aka CSS variables
classes prefix
animate.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。
2、You can follow the development on the dev branch and give your feedback on the issue tracker. Every feedback is welcome!？
follow the development
on the dev branch
on the issue tracker
您可以在dev分支上关注开发，并在问题跟踪器上提供反馈。 欢迎任何反馈！
3、Just-add-water CSS animation？
随便添加CSS动画
4、Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.？
非常适合强调，主页，滑块和一般的加水效果。
5、awesomeness？
敬畏
Sales is just telling people about the awesomeness of your product/service.
销售就是告诉人们你的产品或者服务的价值所在。
Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
6、You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. ？
do a whole bunch of other stuff
英 /bʌntʃ/ n. 群；串；突出物 bunch
将animate.css与Javascript结合使用时，您可以使用animate.css进行大量其他工作。
7、Notice that the examples are using ES6's const declaration, dropping support for IE10 and some aging browsers. ？
using ES6's const declaration
dropping support for IE10
some aging browsers
请注意，这些示例使用的是ES6的const声明，不再支持IE10和某些老化的浏览器。
8、If you prefer, switch the const to var declarations and IE10 and some old browsers will get support (they still have to provide classList support, so do your research).？
If you prefer
switch the const to var declarations
so do your research
如果愿意，可以将const转换为var声明，然后将IE10转换为IE10，一些旧的浏览器将获得支持（它们仍必须提供classList支持，因此您需要进行研究）。
9、Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. ？
so that users with motion sensitivity
can opt out of animations
英 /ɒpt/ vi. 选择 opt out of
Animate.css支持“偏好减少运动”媒体查询，以便具有运动敏感性的用户可以选择退出动画。
二、Animate.css文档翻译
来源：https://github.com/daneden/animate.css/
We need your help! animate.css v4 is in the work with lots of improvements and some breaking changes, including CSS custom properties support (aka CSS variables) and classes prefix for a safer use. We need your feedback! You can follow the development on the
devbranch and give your feedback on the issue tracker. Every feedback is welcome!
我们需要你的帮助！ animate.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。 我们需要您的反馈！ 您可以在dev分支上关注开发，并在问题跟踪器上提供反馈。 欢迎任何反馈！
Just-add-water CSS animation
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Installation
Install via npm:
$ npm install animate.css --save
or yarn:
$ yarn add animate.css
Usage
To use animate.css in your website, simply drop the stylesheet into your document's <head>, and add the class animated to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
or use a CDN hosted version by CDNJS
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
Animations
To animate an element, add the class animated to an element. You can include the class infinite for an infinite loop. Finally you need to add one of the following classes to the element:
| Class Name | |||
|---|---|---|---|
bounce |
flash |
pulse |
rubberBand |
shake |
headShake |
swing |
tada |
wobble |
jello |
bounceIn |
bounceInDown |
bounceInLeft |
bounceInRight |
bounceInUp |
bounceOut |
bounceOutDown |
bounceOutLeft |
bounceOutRight |
bounceOutUp |
fadeIn |
fadeInDown |
fadeInDownBig |
fadeInLeft |
fadeInLeftBig |
fadeInRight |
fadeInRightBig |
fadeInUp |
fadeInUpBig |
fadeOut |
fadeOutDown |
fadeOutDownBig |
fadeOutLeft |
fadeOutLeftBig |
fadeOutRight |
fadeOutRightBig |
fadeOutUp |
fadeOutUpBig |
flipInX |
flipInY |
flipOutX |
flipOutY |
lightSpeedIn |
lightSpeedOut |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
rotateOut |
rotateOutDownLeft |
rotateOutDownRight |
rotateOutUpLeft |
rotateOutUpRight |
hinge |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
slideOutUp |
heartBeat |
Full example:
<h1 class="animated infinite bounce delay-2s">Example</h1>
Check out all the animations here!
It's possible to change the duration of your animations, add a delay or change the number of times that it plays:
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
Usage with Javascript
You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
You can also detect when an animation ends:
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })
You can use this simple function to add and remove the animations:
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}
And use it like this:
animateCSS('.my-element', 'bounce')
// or
animateCSS('.my-element', 'bounce', function() {
// Do something after animation
})
Notice that the examples are using ES6's const declaration, dropping support for IE10 and some aging browsers. If you prefer, switch the const to var declarations and IE10 and some old browsers will get support (they still have to provide classList support, so do your research).
Setting Delay and Speed
Delay Class
It's possible to add delays directly on the element's class attribute, just like this:
<div class="animated bounce delay-2s">Example</div>
| Class Name | Delay Time |
|---|---|
delay-1s |
1s |
delay-2s |
2s |
delay-3s |
3s |
delay-4s |
4s |
delay-5s |
5s |
Note: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code.
Slow, Slower, Fast, and Faster Class
It's possible to control the speed of the animation by adding these classes, as a sample below:
<div class="animated bounce faster">Example</div>
| Class Name | Speed Time |
|---|---|
slow |
2s |
slower |
3s |
fast |
800ms |
faster |
500ms |
Note: The
animatedclass has a default speed of1s. If you need custom duration, add it directly to your own CSS code.
Custom Builds
Animate.css is powered by gulp.js, which means you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:
$ cd path/to/animate.css/
$ npm install
Next, run npx gulp to compile your custom builds. For example, if you want only some of the “attention seekers”, simply edit the animate-config.json file to select only the animations you want to use.
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}
Accessibility
Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), 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. (https://opensource.org/licenses/MIT)
Code of Conduct
This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to callmeelton@gmail.com.
Contributing
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.