Animate.CSS 讓你輕鬆使用56種 CSS3 動畫特效

Animate.CSS介紹

它是一款集合了56種CSS3動態效果的CSS檔，由Dan Eden所開發。有了這個大集合動畫特輯CSS3檔案 , 可以讓設計師在作網頁設計時，只需透過JQuery 輸入指定動畫名稱，就可以針對版面的任何元素進行動畫的渲染喔 !! 最重要的是 , 設計師不用寫半條CSS語法 (歡呼) , 即可迅速實現效果。大家可以先去Animate.CSS體驗看看它提供的56種動態效果！

Animate.CSS 使用教學

首先去官網下載animate.css，你可以選擇一次下載全部CSS特效 , 也可以任意勾選你要的特效，網站會自動幫你打包程客制化的CSS檔案非常方便。

下載回來之後，要使用第一步先在網頁中呼叫：

1. <link rel="stylesheet" href="animate-custom.css">

複製代碼

若不使用JQuery來指定的滑鼠觸動事件的話，直接套用在元素上，就變成頁面載入時產生特效，例如：

<div class="animated rotateIn">當網頁載入時，文字就會旋轉</div>

因此，為了增加它的實用性，我們可以使用簡單的JQuery語法，指定自定義的滑鼠事件(移動經過、移出、點擊..等)來產生動畫效果，官網範例中就是利用點擊來產生效果，詳細使用如下：

1. //先載入JQuery
   
2. <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

複製代碼

接著設置滑鼠事件對指定元素產生動畫效果

1. <script>
   
2. $(function(){
   
3.          $("自定義ID或Class1").click(function(){
   
4.                 $("自定義ID或Class2").addClass("animated  rotateIn");               
   
5.         })
   
6. });
   
7. 
   
8. </script>

複製代碼

上面簡短的JQuery語法用意是，當點擊了"自定義ID或Class1" 對 "自定義ID或Class2" 產生動畫 !
剩下要如何活用就是靠各位的創意囉