[CSS] Animation：使用 Animate.css 製作超炫的動畫效果

Animate.css 是一個超強的 CSS3 動畫庫，它使用簡單，只需要將相關效果對應的 class 加入頁面元素中，就能實現翻轉、滑動、旋轉等等複雜超炫的跨瀏覽器的動畫效果，它讓製作網頁動畫變得非常簡單。

Step 1 下載套件

☞ Animate.css

Step 2 核心文件

• animate.css

Step 3 給指定的元素，加上指定的動畫 class 樣式名

例：<div class="animated bounceOutLeft"></div>

• 第一個樣式名：animated，是基本、必要添加的
• 第二個樣式名：是指定的動畫樣式名，也就是想要什麼動畫效果，指定對應的動畫樣式名稱就可以。如果想讓動畫循環，則可以加入樣式：infinite
• Animate.css 提供了以下多種動畫效果，可以直接作為 class 樣式添加使用 ☞ 特效清單

資料來源

☞ CSS3使用Animate.css製作超炫的動畫效果

---

Step 1 下載套件

☞ CSS3 Animation Cheat Sheet

Step 2 引用必要文件

• animations.css

Step 3 給指定的元素，加上指定的動畫 class 樣式名

例：<div class="animations slideExpandUp"></div>

• 第一個樣式名：animations，是基本、必要添加的
• 第二個樣式名：是指定的動畫樣式名，也就是想要什麼動畫效果，指定對應的動畫樣式名稱就可以。
• CSS3 Animation 提供了以下多種動畫效果，可以直接作為 class 樣式添加使用 ☞ 特效清單

---

〔下載我的範例〕

☞ animate 動畫
☞ Interactive Background (全螢幕)
☞ Interactive Background
☞ 厲害的貓 (作者：Roxik)
☞ GreenSock

動畫練習

☞ CSS animation examples with TexturePacker 農夫走路
☞ Reverend Danger 牧師危險
☞ CSS A/Z 簡單動畫
☞ 圖片旋轉
☞ 圖片搖晃
☞ Magic Effects
☞ 會飛的按鈕
☞ 圖片搖晃
☞ 圖片旋轉
☞ 按鈕發光

其他資源

☞ 30 Pure CSS Animation Snippets & Demos
☞ Multiple CSS3 animation on the same element
☞ Creating Scroll-based Animations using jQuery and CSS3
☞ 如何單純使用CSS3及HTML製作圖片輪播效果

資料來源

☞ 30 Cool CSS Animations You Have To See
☞ 梅問題教學網 | 《CSS3 Animation》CSS3動畫套件，讓網站動起來超EZ!
☞ 如何使用 CSS3 ANIMATION