精選!CSS 動畫之工具、框架和教程

IT程式獅發表於2017-01-22

675733-811c921e947b6fc1

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

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


CSS 動畫工具和框架

1. Animate.css

675733-1c6c691a57aefa92

Animate.css 是一個跨瀏覽器 CSS 動畫的集合,你可以在滾動條、主頁上等 Web 專案中使用它。

2. Stylie

675733-6190ed15250e535c

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

3. animo.js

675733-da814147efe88cad

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

4. Anima

675733-dd2930c0cca96919

輕量級(當 gzip 壓縮時只有 5 k)Anima 允許你同時對多個物件進行動畫處理,而每個專案都可以通過質量和密度來模擬現實生活中的物體。 同時,你可以利用 CSS 變換和 3D 變換與 JavaScript 一起建立動畫。

5. Rocket

675733-941c27ea7127ac19

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

6. Animate Plus

675733-b8d7ff5afec63bbc

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

7. Tuesday

675733-fa3b6703ddf328df

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

8. Shift.css

675733-512c9465f4a4e14e

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

9. Motion UI

 精選!CSS 動畫之工具、框架和教程

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

10. CSS Shake

675733-424d249f9c7967fa

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

11. Magic Animations

675733-94a2c67523777d20

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

12. Hover.css

675733-8627bf8f755e26bd

Hover.css 是一套基於 CSS3 的滑鼠懸停效果動畫庫。

13. Saffron

675733-1870b8c8797a7a5e

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

14. CSSynth

675733-a8eab86973160ee9

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

15. Ceaser

675733-62b160dd52adb945

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

16. WAIT! Animate

675733-e745f6dd9c0e1293

WAIT! Animate 是一款用於計算 CSS 動畫中關鍵幀百分比的工具。

17. Tridiv

675733-c166df5d022a2172

Tridiv 是一個基於 Web 的編輯器,你可以用 CSS 建立 3D 形狀。同時,它跨瀏覽器相容。

18. Morf.js

675733-bb49828ad2c54a3c

Morf.js 提供了一系列 JavaScript 的方法,幫助你利用自定義的緩動功能來生成硬體加速的 CSS3 轉換效果。

19. CSS3 Keyframes Animation Generator

675733-c2b91954d620ff40

顧名思義,CSS3 Keyframes Animation Generator 是一個幫助你建立 CSS3 關鍵幀動畫的線上工具。

20. Effeckt.css

精選!CSS 動畫之工具、框架和教程

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

21. CSS3 Animation Cheat Sheet

675733-bbc2786157cca087

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 條形圖表。

相關文章