使用Animate.css

• 摘要
  这是一个全部由css3做的动画库，担心兼容性的慎用。

• 基本操作

1. 引入animate.css:
   引入本地：

 <link rel="stylesheet" href="animate.min.css">

引入cdn：

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

• 简单使用

<h1 class="animated infinite bounce">Example</h1>
//基础类[必选]：animated
//是否循环动画[可选]：infinite。有则循环动画
//动画类[必选]： bounce

所有动画：https://daneden.github.io/animate.css/

//自定义动画的实现
#yourElement {
   -vendor-animation-duration: 3s;
   -vendor-animation-delay: 2s;
   -vendor-animation-iteration-count: infinite;
}
//注意vendor是浏览器前缀
//
//EXP:
<div class="animated flipInY mine">i am animate</div>
.mine {
   animation-duration: 5s;  //动画执行时间
   animation-delay: 1s;  //延迟
   animation-iteration-count: 3;  //动画循环次数
   -webkit-animation-duration: 5s;
   -webkit-animation-delay: 1s;
   -webkit-animation-iteration-count: 3;
}

• 配合jquery使用

//jquery添加动画
$('#yourElement').addClass('animated bounceOutLeft');

//检测动画结束，触发回调函数
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
//毁掉函数：doSomething

回调函数只有动画结束的时候才会回调（上面mine那个类也证明了，动画循环3次后才会回调回调函数），当使用infinite做循环动画的时候，是不会触发回调函数，估计这也是animate的github上文档是使用one来绑定回调。
ps: one绑定的事件只会执行一次。

//封装自己的动画函数
$.fn.extend({
   animateCss: function (animationName, callback) {
       var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
       this.addClass('animated ' + animationName).one(animationEnd, function() {
           $(this).removeClass('animated ' + animationName);
           callback && callback.call(this);
       });
   }
});