Animate.css 超强CSS3动画库，三行代码搞定H5页面动画特效！

home 编辑时间 2019/04/08

###一、基本用法
<br>
####引入CSS依赖
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">
```
<br>
####在元素的Class中加以下内容
1. animated (**必选**)
2. infinite (可选) 无限重复
3. bounce (**必选**) 动画样式 ***参考下方表格***
4. delay-2s (可选) 延迟出现 
```html
<div class="animated infinite bounce delay-2s"><h1>Example</h1></div>
```
| 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`       |
<br>
大功告成，刷新页面即可查看动画效果。
基本用法就是这些
官方还给出了一些进阶用法如下
<hr>
###二、进阶用法
<br>
####动态调用动画的Javascript例子
```javascript
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)
}
```
<hr>
###三、在官方例子基础上，稍加修改以后
<br>
由于官方例子用的是querySelector，故只会选中第一个符合要求的元素。
并且持续时间只有slow(2s)、slower(3s)、fast(800ms)、faster(500ms)
故我稍加修改，依然用的原生JS语法(部分ES6)
其中选择器element改为选中所有符合要求的元素
新增times参数，可以是2000ms或者2s
<br>
```javascript
/**
 * element: 选择器 例如 #id | .class | div
 * animationName: 动画名称 参考animate.css官网 例如fadeIn
 * times: 持续时间 例如 200ms | 2s
 * callback: 回调函数
 */
function animateCss(element, animationName,times, callback) {
    const nodes = document.querySelectorAll(element)
    nodes.forEach((node => {
        if(times) node.style.setProperty('animation-duration', times, 'important');
        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)
    }))
}
```
例子
```javascript
animateCss('.post', 'pulse');
animateCss('.post', 'pulse','200ms');
animateCss('.post', 'pulse','200ms',function(){//do something});
```
<br>
<hr>
####官网 
[https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/)
[https://github.com/daneden/animate.css](https://github.com/daneden/animate.css)

送人玫瑰,手留余香