animate.css一个跨浏览器的CSS动画库。简单易用。虽然已Star，但每次使用使用时都要在stars里查找。。。当然啦，更多动画库可以参考这里。
如何使用
要在网站中使用animate.css，只需将样式表放到文档的<head>中，然后将动画类与任何动画名称一起添加到元素中就可以了。
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>动画
要设置元素的动画，请将该类添加animated到元素中。您可以包含infinite无限循环的类。最后，您需要向元素添加以下类之一：
| 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 |
完整的例子：
<h1 class="animated infinite bounce delay-2s">Example</h1>可以更改动画的持续时间、添加延迟或更改播放次数：
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}与javascript一起使用
当你把animate.css和javascript结合在一起时，你可以用它做很多其他的事情。一个简单的例子：
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')您还可以检测动画何时结束：
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })您可以使用此简单函数添加和删除动画：
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)
}像这样使用：
animateCSS('.my-element', 'bounce')
// or
animateCSS('.my-element', 'bounce', function() {
// Do something after animation
})注意，这些示例使用了ES6的const声明，放弃了对IE10和一些老化浏览器的支持。如果您愿意，将const转换为var声明，IE10和一些旧的浏览器将得到支持（它们仍然需要提供classList支持）。
设置延迟和速度
延迟类
可以直接在元素的class属性上添加延迟，如下所示：
<div class="animated bounce delay-2s">Example</div>| Class Name | Delay Time |
|---|---|
delay-2s | 2s |
delay-3s | 3s |
delay-4s | 4s |
delay-5s | 5s |
注意：默认延迟仅为1秒到5秒。如果需要自定义延迟，请直接将其添加到您自己的CSS代码中。
Slow, Slower, Fast, and Faster 类
可以通过添加这些类来控制动画的速度，示例如下：
<div class="animated bounce faster">Example</div>| Class Name | Speed Time |
|---|---|
slow | 2s |
slower | 3s |
fast | 800ms |
faster | 500ms |
注意：动画类的默认速度为1。如果需要自定义持续时间，请直接将其添加到您自己的CSS代码中。
更多细节查看这里。
