jquery.animate.js调用Animate.css实现强大的css3动画

引用

<link rel="stylesheet" href="animate.min.css">
<script src="jquery.js"></script>
<script src="jquery.animate.js"></script>

给指定的元素加动画样式

<div class="animated fadeInLeft"></div>
// 这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。
第二个是指定的动画样式名。

给元素添加动画样式，通过jquery来实现

$(function(){
    $('.animated').animateCss('bounceOutLeft');
});

jquery.animate.js

(function($){
    $.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
    });
})(jQuery);

Animate.css

链接： https://daneden.github.io/animate.css/