在這篇文章中，我們將不討論使用 CSS 動畫的好處，也不會談論 JS 動畫是否比 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 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 長條圖。
以上是CSS 動畫之工具、框架與教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
