今天介紹一個強大的CSS3庫
Animate.css
庫如其名 ，是一個動畫庫
通過它我們非常輕鬆地新增動畫效果
“Just-add-water CSS animations”
像灌水一樣簡單
我們只需要新增幾個類名
下載地址及動畫效果戳這裡：Animate.css
使用這個庫只需要把animate.css引入我們的檔案即可

<link rel="stylesheet" href="styles/animate.css">

靜態使用

靜態使用也就是最基本的使用方法
直接給元素加class類名
以彈跳bounce動畫效果為例

<h1 class
 
="animated bounce">Animate</h1>

animated是必須要新增的類名
只有添加了它，Animate.css庫才認為我們是要使用它的動畫效果

/*原始碼*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

看了原始碼我們也可以DIY動畫時間等等

類名中bounce就是動畫效果的類名

這樣設定的樣式預設是動一次
如果你想讓這個動畫無限迴圈下去
那就新增一個inifinite

<h1 class="animated bounce infinite">Animate</h1>

/*原始碼*/
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

這種靜態的使用方法優點不用說
不用js，新增類名，輕鬆實現動畫
缺點同樣明顯
我們並不能很好的控制它
若不考慮無限迴圈動畫
只有網頁剛剛載入完畢後元素才動一次
應用的場景大概僅僅是
開場吸引使用者注意的動畫或者loading載入動畫

為了能夠更好的利用它
我們還是要配合js來使用

動態使用

動態使用無非就是想讓元素運動就新增類名
元素運動完就移除類名（需要監聽動畫結束事件）
這裡我擴充套件jQuery給大家演示一下
通過點選一個按鈕來使文字“彈跳”

<h1 id="demo">Animate</h1>
<button id="btn">click</button>

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});
$('#btn').on('click',function(){
    $('#demo').animateCss('bounce');
});

每次點選按鈕都會有一個動畫效果

也可以用原生js簡單實現

var btn = document.getElementById('btn');
var demo = document.getElementById('demo');
btn.onclick = function(){
    demo.addEventListener('animationend', function(){
        this.className = '';
        this.removeEventListener('animationend', false);
    }, false);
    demo.className = 'animated bounce';    
}

大家還可以擴充套件函式，控制動畫的次數、時間等等
這樣便實現了我們對於動畫的控制

最後補充一點
行級元素（span標籤、a標籤等等）是不能夠使用這個Animate.css動畫效果的
換句話說，行級元素新增庫的類名是無效的

這個動畫庫確實很厲害
看它的原始碼就會發現
很多keyframes細節都處理的非常好
可不是簡單的晃兩下
作者 Daniel Eden 不愧是大神
把這個強大又酷炫的CSS3動畫庫
推薦給大家