animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。
基本用法
引入CSS文件
这个对你来说应该再容易不过了，我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件，如下：
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
辅助类
给你想添加动画效果的元素添加一个 animated 类（必需）。如果需要动画循环运动，你还需要给这个元素追加 infinite 类，又或者自己另外定义一个类似于 infinite 的类。
效果添加
接下来就是最后一步了，最激动人心，也是最重要的一步，为元素添加你想要的效果所对应的类名就大功告成了。下面我就列出来，你大可随便挑，随便选。
示例
<h1 class="animated infinite bounce">Example</h1>你可以通过这里来体验 Animate.css 的强大效果：https://daneden.github.io/animate.css/
进阶用法
正如上面所说的，把 animate.css 用到你的网站项目中，你只需要简单地把下面的这一行代码扔到你页面的head 标签里就可以了，接着就是给目标元素添加一个 animated 类。就这样！你就可以得到一个酷炫的动画效果了。
<head>
<link rel="stylesheet" href="animate.min.css">
</head>jQuery 基本用法
你还可以通过 jQuery 或者自己定义的 CSS 规则来给目标元素一次性添加对应效果的 class 类。
$('#yourElement').addClass('animated bounceOutLeft');你还可以监听动画事件是否已经执行完毕，并执行回调函数。
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);扩展 jQuery
你还可以通过扩展 jQuery 来实现自己想要效果。
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});可以像下面这样使用
$('#yourElement').animateCss('bounce');动画延时
你还可以改变动画运动时间，添加动画延迟，或者直接修改默认配置的数字。
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}使用的时候记得把CSS样式中的“vendor”用相应的前缀替换掉（webkit, moz, etc）。
定制构建
gulp.js 管理
Animate.css是通过 gulp.js 管理，你可以很轻易地创建自定义构建，首先你需要的就是一个Gulp
$ cd path/to/animate.css/
$ sudo npm installgulp.js 用法
接下来就是执行 gulp 来完成你的自定义构建。例如，如果你只想使用里面的一些效果，你就可以简单的编辑 animate-config.json 来选择你想要的效果代码就好了。
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}