相信很多人都了解过CSS3的动画效果，也曾写过CSS3的动画，那么也一定知道有一款封装了很多CSS3动画的插件：Animate.css。

如果不知道也没关系，先来简单的介绍一下：

1.用法

首先在页面引入Animate.css样式表文件，里面定义了很多动画并提供了动画对应的类名，用户只需要将animated和动画对应的类名添加到元素上，即可使该元素具有相应的动画效果，如：

<div class="animated fadeIn"></div>

animated是固定必需的类名，fadeIn则是动画对应的类名，这里是渐现效果。

2.下载

地址：https://daneden.github.io/animate.css/

3.妙用

相信不少人有这样一个需求：点击某个元素或者某个交互动作后，展示动画效果。那么仅仅通过添加样式类必然是无法实现的。

我们可以用Javascript和jQuery稍微封装一下：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
//封装动画方法
function animate(selector, animateName, callback) {
    $(selector).addClass('animated ' + animateName).on(animationEnd, function () {
        //移除动画样式
        $(selector).removeClass('animated ' + animateName);
        //动画播放完毕后执行回调函数
        if (typeof callback === 'function') {
            callback.call(this);
        }
    });
}

参数说明：

selector：jQuery选择器

animateName：animate.css中动画对应的类名

callback：动画执行完毕后的回调函数

使用方法：

<div id="test">鼠标悬浮有动画效果</div>

$('#test').on('mouseover', function () {
    animate(this, 'rubberBand');
});

效果展示：

4.附录（Animate.css效果大全）

晃动效果

bounce flash pulse rubberBand shake headShake swing tada wobble jello

弹性效果

bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

渐隐渐现

fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig

翻转效果

flip flipInX flipInY flipOutX flipOutY

旋转效果

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

滑动效果

slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp

变焦效果

zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

特殊效果

hinge rollIn rollOut lightSpeedIn lightSpeedOut

感谢翻阅拙作，敬请斧正。