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

IT程式獅發表於2017-01-22
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 條形圖表。

英文原文：CSS Animation Tools, Frameworks & Tutorials
譯文地址：http://www.jianshu.com/p/31d6061cd263

相關文章