CSS 動畫之工具、架構和教程

在這篇文章中，我們將不討論使用 CSS 動畫的好處，也不會談論 JS 動畫是否比 CSS 動畫更快，而是與你分享一些 CSS 工具，架構和教程。它們將有助於緩解你在學習 CSS 動畫中的困擾，並協助你節省一些時間。

CSS 動畫工具和架構

1. Animate.css

Animate.css 是一個跨瀏覽器 CSS 動畫的集合，你可以在捲軸、首頁上等 Web 項目中使用它。

2. Stylie

Stylie 是一個可視化的 CSS3 動畫工具，你可以使用它來配置和產生專屬的動畫合集。

3. animo.js

animo.js 是一個強大的 CSS 動畫管理工具。你可以輕鬆按順序堆放動畫，或者在任何事件、任何時刻指定要播放的動畫。

4. Anima

輕量級（當 gzip 壓縮時只有 5 k）Anima 允許你同時對多個對象進行動畫處理，而每個項目都可以通過品質和密度來類比現實生活中的物體。 同時，你可以利用 CSS 變換和 3D 變換與 JavaScript 一起建立動畫。

5. Rocket

Rocket 是一個用於建立網頁動畫的簡單工具。

6. Animate Plus

Animate Plus 是一個高效能的 JavaScript 庫，它能協助你建立動態 CSS 屬性和 SVG 屬性。

7. Tuesday

Tuesday 是一款奇特的 CSS 動畫庫。

8. Shift.css

Shift.css 是一個用於建立定時的 CSS 動畫的簡單響應式架構。

9. Motion UI

Motion UI 是一個用於建立靈活的 CSS 轉換和動畫的 Sass 庫。

10. CSS Shake

CSS Shake 是一套 CSS3 實現的動畫特效，它可以讓頁面的 DOM 元素實現各種抖動效果。

11. Magic Animations

Magic Animations 是一個具備獨特的 CSS3 動畫特效的小型庫。

12. Hover.css

Hover.css 是一套基於 CSS3 的滑鼠移至上方效果動畫庫。

13. Saffron

Saffron 是一個簡單的 CSS3 動畫和轉換的 Sass mixin 庫。

14. CSSynth

CSSynth 是一個可線上運行動畫的應用程式。

15. Ceaser

Caesar 是一個簡單的 CSS 緩動動畫工具，方便你輕鬆地在項目中使用。

16. WAIT! Animate

WAIT! Animate 是一款用於計算 CSS 動畫中主要畫面格百分比的工具。

17. Trip

Trip 是一個基於 Web 的編輯器，你可以用 CSS 建立 3D 形狀。同時，它跨瀏覽器安全色。

18. Morf.js

Morf.js 提供了一系列 JavaScript 的方法，協助你利用自訂的緩動功能來產生硬體加速的 CSS3 轉換效果。

19. CSS3 Keyframes Animation Generator

顧名思義，CSS3 Keyframes Animation Generator 是一個協助你建立 CSS3 主要畫面格動畫的線上工具。

20. Effeckt.css

Effeckt.css 是一個提供了大量動畫和轉換效果的庫。它包含了彈窗、按鈕、導航、列表等特效動畫，方便你在 Web 項目中使用。

21. CSS3 Animation Cheat Sheet

CSS3 動畫速查表提供了一組預先製作的 CSS3 動畫。你可以將樣式表添加到你的網站，並將預先產生的 CSS3 類應用到必要的元素中。

CSS 動畫教程

• CSS 動畫初學者介紹
  本教程將向你展示，如何快速建立一個將正方形元素轉化為圓形的動畫樣本。

• 
  

• CSS Transitions、Transforms 以及 Animation 教程
  這個網站的教程將指導你，如何在 Web 項目中使用 CSS3 中的Transitions、Transforms 以及 Animation。 教程也比較簡單，不需要掌握 CSS3 的進階知識就可以學習。

• 
  

• 使用 CSS Animations
  一個 CSS Animations 的基礎教程。 如果你正在尋找開始 CSS 動畫入門的地方，那麼，這個教程非常適合你。

• 
  

• 使用 CSS Transitions
  就像上面的教程一樣，這個教程也是來自 Mozilla 開發人員網路，旨在教你如何使用 CSS Transitions 。

• 
  

• 四個簡單的 CSS3 動畫教程
  這個資源是由四個 CSS3 動畫教程組合而成的。你可以瞭解如何使用 CSS3 動畫中的四個方法：scale（）、translate（）、rotate（）和skew（）。

• 
  

• CSS虛擬元素動畫和轉換樣本教程
  本教程將為大家展示，在 CSS 動畫和轉換中使用虛擬元素的潛力——：before和：after。

• 
  

• 使用 CSS3 動畫製作 3D 橫條圖表
  這個進階教程，將為大家展示如何使用 CSS3 動畫來建立 3D 橫條圖表。