animate.css高大上的CSS3动画库

Animate.css是一款兼容多款浏览器的CSS3动画库，使用方便，效果绚丽。

Animate.css的兼容性

Animate.css的用法

下载Animate.css

官网的github上animate.css的宣传口号：

A cross-browser library of CSS animations. As easy to use as an easy thing.

官网地址：http://daneden.github.io/animate.css/

通过上述地址，也可以查看各种动画效果及其class名称

导入Animate.css文件

下载animate.css文件后，直接在head标签内加上如下代码即可：

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

让某个元素动起来

想让某个元素动起来，只要给这个元素加上特定的动画样式名即可，代码如下：

<div id="showLarge" class="animated fadeIn">
            <img id='large_img'>
</div>

代码中包括两个class名：animated和fadeIn，其中第一个样式名animated是必须要添加，任何想实现动画的元素都得添加这个样式名。第二个样式名fadeIn是指定的动画样式名，其他可选的样式名请见官网或https://github.com/daneden/animate.css 中的下拉列表。

可以在html代码上添加动画样式，当然也可以通过jquery动态添加，代码如下：

$largeImg.addClass("animated bounceInRight");

动画结束事件

当动画效果执行完成后还可以通过以下代码添加事件

$('#someElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            //doSomething
            //如果是多个动画效果切换，那么必须要在动画结束事件的回调函数中
            //去除所有动画样式，即：
            $("#element").removeClass("animated bounceInLeft");
            //否则可能会引起动画无法正确显示的问题
});

其他更多用法请见：https://github.com/daneden/animate.css