前言

今天上班時發現好玩的Css動畫函式庫 Animate.css，由Daniel Eden製作，Soure Code也有公開是GitHub上面，回家後馬上抓來玩玩看效果還不錯，在這邊紀錄一下筆記。

使用方法

先去官網取的Animate.css這隻檔案然後引入自己的網頁裡

1

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

再來只要修改標籤的class改成要的效果，效果可以看官網的範例，然後再class還要再加上animated就行了例如我要給一行字執行wobble這個特效

1

<p class="wobble animated">Test</p>

這樣就OK了，不過只會執行一次喔!想要多次當然只能依靠JS幫忙簡單寫一下，例如我要按下一個Button讓文字產生效果 Html部分

1
2


<button id="testBtn">Test</buttion>
<p id="testWord">Test Word</p>

JS部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// js
var btn = document.getElementById('testBtn');
var animate = function(){
    var imageCss = docunment.getElementById('testWord');
    imageCss.className = "wobble animated"; 
}
btn.onclick = animated;

// jquery
$('#testBtn').click(function(){
    $('#testWord').attr("class","wobble animated");
});

簡單範例

因為同事問過是不是能用在圖片，所以我就用圖片當範例不用文字了!

效果：

後記

這個真的蠻好玩的，配合JS都能自己做出簡單的輪播，對後端工程師來說真的很好上手。

附錄

Animate.css的GitHub