精選！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. Tridiv

Tridiv 是一個基於 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 條形圖表。

感謝你的閱讀，若是以爲文章不錯，不妨點個贊。

注：

1. 本文版權歸原做者全部，僅用於學習與交流。
2. 如需轉載譯文，煩請註明出處，謝謝！

英文原文：CSS Animation Tools, Frameworks & Tutorials
做者：Paul Andrew
譯者：IT程序獅
譯文地址：https://zhuanlan.zhihu.com/p/24931899