火星網校
前端福利！10個免費好用功能強大的網頁動畫效果庫
發布時間：2018-11-17 19:57:24
動效設計是2018年的熱門趨勢之一。當然，創造動效並沒有必要從0開始，有大把的設計項目可以供你快速上手，納入到設計項目當中去。
如果你仔細找找的話，會發現許多有趣的用來構建UI動效的工具，而這些素材和工具正在成為越來越多設計項目中不可或缺的催化劑。必須承認，這些代碼生成器和動畫工具能設計師和前端事半功倍。今天的文章，我們將會推薦10個靠譜的開源免費網頁動效庫，幫你設計加速。
1、GSAP
GSAP可能目前最炫酷的免費動畫庫之一了。它運行於純粹的JavaScript之上，是目前最強健的動畫資源庫之一。
它符合HTML5的規範，並且和幾乎所有的現代瀏覽器都能良好的協同，可以SVG、畫布元素甚至jQuery對象良好地協同，諸如 EaselJS這樣的庫也可以和GSAP聯動。
如果你需要一個強大的網頁動畫庫的話，GSAP絕對值得一看。
2、Anime.js
當我第一次看到Anime.js這個庫的時候，徹底被它迷住了。這玩意非常強大，功能並不僅限於UI/UX動畫的製作。
你可以借助Anime.js將動畫加持在LOGO、按鈕、圖像等各種各樣的元素上，它支持各種常見的觸發機製，比如點擊、懸停、滑動，你可以借助它定義一係列的動畫。
3、Wicked CSS
Wicked CSS是一個相對更新一些的動效庫，它主要是基於CSS代碼的。Wicked CSS借助CSS3的特性，提供了一些堪稱不可思議的特效。
在它的首頁上，你會看到許多實時演示，你可以通過這些範例學會如何讓對象進行旋轉、翻轉、劃入等不同類型的動畫效果。
有些動畫效果很簡單，但是它同樣可以實現許多複雜而有趣的動畫，這也是Wicked CSS有意思的地方。
4、Animate CSS
也許Animate.CSS才是你想要的最終的網頁動效解決方案。這個開源代碼庫是幾年前發布的，但是時至今日它依然是最有用的動效代碼庫。
開發者Daniel Eden是這個項目的發起者，他以最簡化的方式在網頁上發布自定義的CSS3動畫，通過半年多時間的積累，構建出了一個完整的動畫庫，並且幾乎可以應對絕大多數的項目。
項目主頁上有大量的演示，GitHub上還有許多很棒的文檔供你參考。
5、Tuesday
Tuesday所提供的動畫最令人著迷的地方，是其中動畫都非常的簡單、有用。借助這個庫，你可以有效的控製頁麵中元素的出現和消失的方式。
這些動畫並不是那種炫酷屌炸天的，相反它們是非常微妙的，真正從美學和用戶體驗的層麵提升整個頁麵的設計。Tuesday是純粹的CSS代碼，幾乎可以和任何網站無縫地銜接起來。
6、CSShake
坦率的講，我從來沒有見過比CSShake更加奇怪或者有趣的CSS庫了。它所帶來的動畫效果非常的瘋狂、獨特，它並不一定適合每個網站。
換句話來說，就是CSShake所提供的動效其實是獨一無二的，這也是為什麼它會存在於這個列表當中。
7、Mo.js
通過細節仔細對比了諸多的JavaScript庫之後，不得不說Mo.js是最好的動效庫之一。Mo.JS非常的龐大，而且它是完全為UI/UX設計而生的動效庫。
關於Mo.js有大量的文檔和教程，它的代碼操作並不複雜，了解之後就可以輕鬆掌握。它有著許多令人驚歎的功能，無論是導航欄，還是LOGO或者其他複雜的元素，它都能夠將他們合理的動畫化。
8、Animate Plus
Animate Plus是一個輕量級的動效庫，它隻有2KB，但是它有著自定義JavaScript動畫所需的全部基本功能。
使用npm你可以輕鬆地將Animate Plus安裝好，你隻需要按照Github上的代碼進行設置即可。其中所包含的絕大多數都是基本的Demo，所以你不會碰到複雜的問題，不過通過Github，你會找到所有你需要的選項和方法。
9、Bounce.js
隻需要點擊幾下，你就可以借助Bounce.js創造出強大的CSS3和JS動畫了。
在主頁上，你會找到一個模塊化的自定義動畫生成器，通過這種方式Bounce.js會幫你將特定的功能添加到你的頁麵上，無需添加額外的代碼。
和其他的同類工具不同的地方在於，它不僅僅是一個庫，而是有這用戶可以直接操作的實際功能，它帶有一個完整的網頁構建器。Bounce.js是為數不多的可以直接在瀏覽器中進行設計和設置的動畫庫之一。
10、Magic
Magic可能是最有趣的動效庫之一。它集合了許多基於CSS3的動畫效果，並且帶有許多在別的地方根本找不到的自定義樣式。這是一個非常大的CSS3代碼庫合集，你也會在這裏學會許多巧妙的動畫設計技巧。
（本文轉載於：優設網，譯者：@陳子木，原作者：JAKE ROCHELEAU，原文地址：http://www.uisdc.com/10-best-free-animation-libraries）
分享
华体会hth体育网
賞析
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
本文將為你探索室內設計需要學習的關鍵課程，並引導你如何在火星時代教育獲得專業的室內設計培訓。
-
本文將介紹適合學習Unreal Engine 4設計的人群，以及火星時代教育如何幫助您成為UE4設計領域的專業人士。
-
火星時代教育的商業廣告插畫班詳解插畫在商業廣告中的作用，以及如何提高你的插畫技巧，讓你的廣告項目得到更大的提升。
-
火星時代教育提供全麵的人物角色建模網絡培訓班，教您如何掌握角色建模的技巧，塑造出生動的遊戲角色。
-
平麵設計學習入門：火星時代教育帶你開啟設計之旅 | 引領設計未來
借助火星時代教育的專業教學，掌握平麵設計的基礎知識和技能，快速入門，開始你的設計之旅。
-
探究數字化虛擬人課程的重要性，以及火星時代教育如何幫助學生掌握相關知識和技能。關鍵詞：數字化虛擬人，火星時代教育。
