一、静态使用:

1.在head引入 animate.css  文章底部有下载链接

2.给需要动画的元素加Class

<div class="animated bounce infinite">动画</div>

<!-- animated是必须添加的;bounce是动画效果;infinite从语义来看也秒懂,无限循环不添加infinite默认播放一次 -->

3.刷新页面看到“动画”两个字可以上下动了

二、动态使用:

1.给动画对象添加类,然后监听动画结束事件,一旦监听到动画结束,立即移除前面添加的

这样一来,想什么时候开始和结束动画都随你了。官方给出jQuery的封装:

//扩展$对象,添加方法animateCss
    $.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');
Animate.css下载地址: