精選!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
相關文章
- 精選的 Go 框架,庫和軟體的精選清單Go框架
- 精選HTML5/CSS3動畫應用原始碼分享HTMLCSSS3動畫原始碼
- CSS動畫篇之404動畫CSS動畫
- Flutter動畫之粒子精講Flutter動畫
- CSS載入動畫框架Loaders.cssCSS動畫框架
- CSS 框架 Bulma 教程CSS框架
- js 和 css動畫JSCSS動畫
- CSS3動畫之逐幀動畫CSSS3動畫
- 面試精選之Promise面試Promise
- 用 CSS3 和 JavaScript 製作徑向動畫選單CSSS3JavaScript動畫
- CSS3 單選框動畫特效CSSS3動畫特效
- CSS中的一下小技巧2之CSS3動畫勾選運用CSSS3動畫
- 精選 20 個優質的載入動畫動畫
- 超酷HTML5 3D動畫精選HTML3D動畫
- 創意HTML5動畫應用精選HTML動畫
- 精簡選單和完整選單之間進行切換
- css選擇器,盒子模型,定位,動畫CSS模型動畫
- 精讀《使用 CSS 屬性選擇器》CSS
- CSS 和 JavaScript 常用工具方法封裝教程!CSSJavaScript封裝
- CSS3過渡和動畫CSSS3動畫
- CSS 和 JS 動畫哪個更快CSSJS動畫
- pyspider 爬蟲教程(1):HTML 和 CSS 選擇器IDE爬蟲HTMLCSS
- CSS動畫之旋轉魔方輪播CSS動畫
- css3新特性之動畫使用CSSS3動畫
- 面試精選之http快取面試HTTP快取
- css動畫CSS動畫
- Web專案管理工具精選Web專案管理
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- CSS速刷 - CSS動畫CSS動畫
- 【精選】Mac 手動記憶體清理教程Mac記憶體
- CSS動畫篇之炫酷時鐘之時鐘牆CSS動畫
- SpriteSheet精靈動畫引擎動畫
- CSS animation 動畫CSS動畫
- Web專案管理工具精選(上)Web專案管理
- Web專案管理工具精選(下)Web專案管理
- 強大的CSS:模擬下雪效果動畫製作教程CSS動畫
- css屬性的選擇對動畫效能的影響CSS動畫
- CSS中的“大白”——CSS 動畫CSS動畫