一款基于css3 animation制作的超强特效动画库animate.css
animate.css是一款使用CSS3新特性制作的动画特效库，可以说它是CSS3动画的封装库，它里边预设了很多种常用的动画，用起来非常简单，很容易就上手。
入门指南
基本用法
引入CSS文件，只需要在HTML文件的head标签中引入CSS样式文件，如下：
<link rel="stylesheet" href="./path/to/animate.min.css">
辅助类
在你想添加动画效果的元素的class中添加一个 animated 值（必需）。如果需要动画循环运动，你还需要给这个元素追加一个 infinite的class ，当然你也可以自己定义一个类似infinite的class,如：
<h1 class="animated infinite">我是animate示例</h1>
效果添加
接下来就是最后一步了，最激动人心，也是最重要的一步，为元素添加你想要的效果所对应的类名就大功告成了。下面我就列出来，你大可随便挑，随便选。
- 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
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
示例，比如我这里使用的是bounce特效
<h1 class="animated infinite bounce">我是示例</h1>
总结：看完上边的步骤是不是感觉很简单，我们只需要把animate.css库引入到你的网站项目中，并在网页标签的class中加入 animated 属性值即可。这样我们就得到了一个酷炫的动画效果。
jQuery中使用：
HTML元素：
<h1 id="demoElement">我是示例</h1>
JS脚本：
$('#demoElement').addClass('animated rotateInDownRight');
the end
