Animation.css学习笔记animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在

animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。

安装
npm install animate.css --save 或者 yarn add animate.css 或者直接下载

使用

在项目中引用

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>
或者
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

使用规则
class样式里面animated是一定要有的，后面时animation.css提供的动画效果种类（例如infinite），同时也支持自定义的样式（例如yourElement）。
```
<h1 class="animated infinite yourElement">Example</h1>
```
animation.css支持的动画种类：


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`

支持延时效果（delay效果延时执行）和加速（speed效果执行所花费的时间）
Class Name Delay Time
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s
Class Name Speed Time
slow 2s
slower 3s
fast 800ms
faster 500ms

Class Name	Delay Time
`delay-2s`	`2s`
`delay-3s`	`3s`
`delay-4s`	`4s`
`delay-5s`	`5s`

Class Name	Speed Time
`slow`	`2s`
`slower`	`3s`
`fast`	`800ms`
`faster`	`500ms`

如果想要设置其他的延时和加速效果，请在自己的代码中进行设置。

使用示例：

attention seekers

bounce 弹跳：

<h1 class="animated bounce delay-2s"> test animation css</h1>

flash闪烁：

<h1 class="animated flash delay-2s"> test animation css</h1>

pulse脉搏跳动：

<h1 class="animated pulse delay-2s"> test animation css</h1>

rubberBand橡皮筋:

<h1 class="animated rubberBand delay-2s"> test animation css</h1>

shake摇动：

<h1 class="animated shake delay-2s"> test animation css</h1>

swing摇摆：

<h1 class="animated swing delay-2s"> test animation css</h1>

tada：

<h1 class="animated tada delay-2s"> test animation css</h1>

wobble晃动：

<h1 class="animated wobble delay-2s"> test animation css</h1>

jello果冻：

<h1 class="animated jello delay-2s"> test animation css</h1>

bouncing entrances 登场

bounceIn 弹跳进入(从左)：

<h1 class="animated bounceIn delay-2s"> test animation css</h1>

bounceInDown弹跳从上进入：

<h1 class="animated bounceInDown delay-2s"> test animation css</h1>

bounceInLeft弹跳从左进入：

<h1 class="animated bounceInLeft delay-2s"> test animation css</h1>

bounceInRight弹跳从右进入：

<h1 class="animated bounceInRight delay-2s"> test animation css</h1>

bounceInUp弹跳从下进入：

<h1 class="animated bounceInUp delay-2s"> test animation css</h1>

bouncing exits 退场

bounceOut 弹跳退出：

<h1 class="animated bounceOut delay-2s"> test animation css</h1>

bounceOutDown弹跳从下退出：

<h1 class="animated bounceOutDown delay-2s"> test animation css</h1>

bounceOutLeft弹跳从左退出：

<h1 class="animated bounceInLeft delay-2s"> test animation css</h1>

bounceOutRight弹跳从右退出：

<h1 class="animated bounceOutRight delay-2s"> test animation css</h1>

bounceOutUp弹跳从上退出：

<h1 class="animated bounceOutUp delay-2s"> test animation css</h1>

fading entrances 减弱进入

fadeIn淡入：

<h1 class="animated fadeIn delay-2s"> test animation css</h1>

fadeInDown 从上往下淡入：

<h1 class="animated fadeInDown delay-2s"> test animation css</h1>

fadeInDownBig 从上往下变大淡入：

<h1 class="animated fadeInDownBig delay-2s"> test animation css</h1>

fadeInLegt从左往右淡入：

<h1 class="animated fadeInLegt delay-2s"> test animation css</h1>

fadeInLegtBig从左往右变大淡入：

<h1 class="animated fadeInLegtBig delay-2s"> test animation css</h1>

fadeInRight从右往左淡入：

<h1 class="animated fadeInRight delay-2s"> test animation css</h1>

fadeInRightBig从右往左变大淡入：

<h1 class="animated fadeInRightBig delay-2s"> test animation css</h1>

fadeInUp从下往上淡入：

<h1 class="animated fadeInUp delay-2s"> test animation css</h1>

fadeInUpBig从下往上变大淡入：

<h1 class="animated fadeInUpBig delay-2s"> test animation css</h1>

fading exits 减弱退出

fadeOut淡出：

<h1 class="animated fadeOut delay-2s"> test animation css</h1>

fadeOutDown 从上往下淡出：

<h1 class="animated fadeOutDown delay-2s"> test animation css</h1>

fadeOutDownBig 从上往下变大淡出：

<h1 class="animated fadeOutDownBig delay-2s"> test animation css</h1>

fadeOutLegt从右往左淡出：

<h1 class="animated fadeOutLegt delay-2s"> test animation css</h1>

fadeOutLeftBig从右往左变大淡出：

<h1 class="animated fadeOutLeftBig delay-2s"> test animation css</h1>

fadeOutRight从左往右淡出：

<h1 class="animated fadeOutRight delay-2s"> test animation css</h1>

fadeOutRightBig从左往右变大淡出：

<h1 class="animated fadeOutRightBig delay-2s"> test animation css</h1>

fadeOutUp从下往上淡出：

<h1 class="animated fadeOutUp delay-2s"> test animation css</h1>

fadeOutUpBig从下往上变大淡出：

<h1 class="animated fadeOutUpBig delay-2s"> test animation css</h1>

flipper突然的效果

flip反转轻弹

<h1 class="animated flip delay-2s"> test animation css</h1>

flipInX在x轴反转进入

<h1 class="animated flipInX delay-2s"> test animation css</h1>

flipInY在y轴反转进入

<h1 class="animated flipInY delay-2s"> test animation css</h1>

flipOutX在x轴反转退出

<h1 class="animated flipOutX delay-2s"> test animation css</h1>

flipOutY在y轴反转退出

<h1 class="animated flipOutY delay-2s"> test animation css</h1>

light speed 非常快速的效果

lightSpeedIn 非常快速的进入

<h1 class="animated lightSpeedIn delay-2s"> test animation css</h1>

lightSpeedOut 非常快速的进入

<h1 class="animated lightSpeedOut delay-2s"> test animation css</h1>

rotating entrances 旋转进入

rotateIn旋转进入

<h1 class="animated rotateIn delay-2s"> test animation css</h1>

rotateInDownLeft旋转从左落下

<h1 class="animated rotateInDownLeft delay-2s"> test animation css</h1>

rotateInDownRight旋转从右落下

<h1 class="animated rotateInDownRight delay-2s"> test animation css</h1>

rotateInUpLeft旋转从左升起

<h1 class="animated rotateInUpLeft delay-2s"> test animation css</h1>

rotateInUpRight旋转从右升起

<h1 class="animated rotateInUpRight delay-2s"> test animation css</h1>

rotating exits 旋转退出

rotateOut旋转退出

<h1 class="animated rotateOut delay-2s"> test animation css</h1>

rotateOutDownLeft旋转从左落下退出

<h1 class="animated rotateOutDownLeft delay-2s"> test animation css</h1>

rotateOutDownRight旋转从右落下退出

<h1 class="animated rotateOutDownRight delay-2s"> test animation css</h1>

rotateOutUpLeft旋转从左升起退出

<h1 class="animated rotateOutUpLeft delay-2s"> test animation css</h1>

rotateOutUpRight旋转从右升起退出

<h1 class="animated rotateOutUpRight delay-2s"> test animation css</h1>

sliding entrances 滑动进入

slideInUp上升滑动进入

<h1 class="animated slideInUp delay-2s"> test animation css</h1>

slideInDown下降滑动进入

<h1 class="animated slideInDown delay-2s"> test animation css</h1>

slideInRight从右滑入

<h1 class="animated slideInRight delay-2s"> test animation css</h1>

slideInLeft从左滑入

<h1 class="animated slideInLeft delay-2s"> test animation css</h1>

sliding exits 滑动退出

slideOutUp上升滑动退出

<h1 class="animated slideOutUp delay-2s"> test animation css</h1>

slideOutDown下降滑动退出

<h1 class="animated slideOutDown delay-2s"> test animation css</h1>

slideOutRight从右滑退出

<h1 class="animated slideOutRight delay-2s"> test animation css</h1>

slideOutLeft从左滑退出

<h1 class="animated slideOutLeft delay-2s"> test animation css</h1>

zoom entrances z轴方向进入

zoomIn z轴方向进入

<h1 class="animated zoomIn delay-2s"> test animation css</h1>

zoomInDown z轴方向下降进入

<h1 class="animated zoomInDown delay-2s"> test animation css</h1>

zoomInLeft z轴方向从左进入

<h1 class="animated zoomInLeft delay-2s"> test animation css</h1>

zoomInRight z轴方向从右进入

<h1 class="animated zoomInRight delay-2s"> test animation css</h1>

zoom exits z轴方向退出

zoomOut z轴方向退出

<h1 class="animated zoomOut delay-2s"> test animation css</h1>

zoomOutDown z轴方向下降退出

<h1 class="animated zoomOutDown delay-2s"> test animation css</h1>

zoomOutLeft z轴方向从左退出

<h1 class="animated zoomOutLeft delay-2s"> test animation css</h1>

zoomOutRight z轴方向从右退出

<h1 class="animated zoomOutRight delay-2s"> test animation css</h1>

special 特别的

hinge 铰链效果

<h1 class="animated hinge delay-2s"> test animation css</h1>

jackInTheBox

<h1 class="animated jackInTheBox delay-2s"> test animation css</h1>

rollIn 翻滚进入

<h1 class="animated rollIn delay-2s"> test animation css</h1>

rollOut翻滚退出

<h1 class="animated rollOut delay-2s"> test animation css</h1>