Animate.css CSS3动画库，使用优化版

Animate.css
 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。开发者封装了一些常用的特效效果作为className方便码农使用，以下我简单描述下它怎么玩及分享一个js动态加载的一个优化方法。

demo演示： demo/Animate.css/

使用实例可以参考如下：

1. 下载 animate.css 或者您下载我打包好的实例，在本文末尾下载
2. 加载样式表到您的HTML
3. 引用动画样式如：

/*动画引用，其中bounceInUp为引用的库样式*/
 div{
    animation: bounceInUp 5s;
    -moz-animation: bounceInUp 5s;    /* Firefox */
    -webkit-animation: bounceInUp 5s;    /* Safari 和 Chrome */
    -o-animation: bounceInUp 5s;    /* Opera */
 }

JS动态加载方法：以下是经过我改造过的动态加载方法： 首先您需要引用jQuery框架

/**
 * //---动画动态加载方法-----不影响原有样式--
 * @param __d //--传入对象
 * @param __x //--动画方法
 * //--本方法要与animate.css相配合有效--
 * //例子： doAnim(".PB",'shake'); //--让PB左右晃动
 */
var doAnim=function(__d,__x) {
    if(!(__d instanceof jQuery)) __d=$(__d);
    if(__d.data('__cls')) __d.removeClass(__d.data('__cls')).removeClass('animated');
    __d.addClass(__x + ' animated').data('__cls',__x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass($(this).data('__cls')).removeClass('animated').removeData('__cls');
    });
};

或者参考官方开发团队链接 http://daneden.github.io/animate.css/