最近更新自己的网站时在使用css3的动画功能，感觉有点吃力，每次都要编辑一大堆的代码以及命名，像我这么懒的人一般hold不住的，因此就找了下是否有人专门做成动画库，网上同类的动画库还不少，最后发现还是“animate.css”这个动画库比较简便，就分享出来给大家，下面简述下简介和用法。
简介
Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。
它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句话说：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏览器的动画效果样式集锦，可以直接使用到项目中。
浏览器兼容：
当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
使用方法
1、引入文件
<link rel="stylesheet" href="animate.min.css">
2、HTML 及使用
<div class="animated bounce" id="busy"></div>
给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
如果动画是无限播放的，可以添加 class infinite。
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
$(function(){
$('#dowebok').addClass('animated bounce');
});
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){
$('#dowebok').addClass('animated bounce');
setTimeout(function(){
$('#dowebok').removeClass('bounce');
}, 1000);
});
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#yourElement {
-vendor-animation-duration: 3s;//动画持续时间
-vendor-animation-delay: 2s;//动画持续时间
-vendor-animation-iteration-count: infinite;//动画持续时间,infinite为无限循环
}
注意：一定要在CSS恬当的的前缀(webkit, moz,o等)代替“vendor”
语法:
animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。。
animation-duration: 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction: 规定是否应该轮流反向播放动画。
官网各种动画的演示地址：animate.css
animate可以到官网下载，可是国内上国外网站经常会歇菜，其中原因你懂的，所以我就上传到百度网盘方便大家下载了，下载链接如下：
