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 長條圖。

#

以上是CSS 動畫之工具、框架與教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！