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.

通過上述地址，也可以檢視各種動畫效果及其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是指定的動畫樣式名，其他可選的樣式名請見官網或

可以在html程式碼上新增動畫樣式，當然也可以通過jquery動態新增，程式碼如下：

$largeImg.addClass("animated bounceInRight");

動畫結束事件

當動畫效果執行完成後還可以通過以下程式碼新增事件

$('#someElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            //doSomething
 

            //如果是多個動畫效果切換，那麼必須要在動畫結束事件的回撥函式中
            //去除所有動畫樣式，即：
            $("#element").removeClass("animated bounceInLeft");
            //否則可能會引起動畫無法正確顯示的問題
});