動效設計是2018年的熱門趨勢之一。當然，創(chuàng)造動效并沒有必要從0開始，有大把的設計項目可以供你快速上手，納入到設計項目當中去。

如果你仔細找找的話，會發(fā)現(xiàn)許多有趣的用來構(gòu)建UI動效的工具，而這些素材和工具正在成為越來越多設計項目中不可或缺的催化劑。必須承認，這些代碼生成器和動畫工具能設計師和前端事半功倍。

今天的文章，我們將會推薦10個靠譜的開源免費網(wǎng)頁動效庫，幫你設計加速。

1. GSAP

GSAP 可能目前最炫酷的免費動畫庫之一了。它運行于純粹的 JavaScript 之上，是目前最強健的動畫資源庫之一。

它符合 HTML5 的規(guī)范，并且和幾乎所有的現(xiàn)代瀏覽器都能良好的協(xié)同，可以SVG、畫布元素甚至 jQuery 對象良好地協(xié)同，諸如 EaselJS 這樣的庫也可以和 GSAP 聯(lián)動。

如果你需要一個強大的網(wǎng)頁動畫庫的話，GSAP絕對值得一看。
?

2. Anime.js

當我第一次看到Anime.js 這個庫的時候，徹底被它迷住了。這玩意非常強大，功能并不僅限于UI/UX動畫的制作。

你可以借助 Anime.js 將動畫加持在LOGO、按鈕、圖像等各種各樣的元素上。它支持各種常見的觸發(fā)機制，比如點擊、懸停、滑動，你可以借助它定義一系列的動畫。
?

3. Wicked CSS

Wicked CSS 是一個相對更新一些的動效庫，它主要是基于CSS代碼的。Wicked CSS 借助 CSS3的特性，提供了一些堪稱不可思議的特效。

在它的首頁上，你會看到許多實時演示，你可以通過這些范例學會如何讓對象進行旋轉(zhuǎn)、翻轉(zhuǎn)、劃入等不同類型的動畫效果。

有些動畫效果很簡單，但是它同樣可以實現(xiàn)許多復雜而有趣的動畫，這也是Wicked CSS 有意思的地方。
?

4. Animate CSS

也許 Animate.CSS 才是你想要的最終的網(wǎng)頁動效解決方案。這個開源代碼庫是幾年前發(fā)布的，但是時至今日它依然是最有用的動效代碼庫。

開發(fā)者 Daniel Eden 是這個項目的發(fā)起者，他以最簡化的方式在網(wǎng)頁上發(fā)布自定義的 CSS3動畫，通過半年多時間的積累，構(gòu)建出了一個完整的動畫庫，并且?guī)缀蹩梢詰獙^大多數(shù)的項目。

項目主頁上有大量的演示，GitHub上還有許多很棒的文檔供你參考。
?

5. Tuesday

Tuesday 所提供的動畫最令人著迷的地方，是其中動畫都非常的簡單、有用。借助這個庫，你可以有效的控制頁面中元素的出現(xiàn)和消失的方式。

這些動畫并不是那種炫酷屌炸天的，相反它們是非常微妙的，真正從美學和用戶體驗的層面提升整個頁面的設計。

Tuesday 是純粹的CSS代碼，幾乎可以和任何網(wǎng)站無縫地銜接起來。
?

6. CSShake

坦率的講，我從來沒有見過比 CSShake 更加奇怪或者有趣的 CSS庫了。它所帶來的動畫效果非常的瘋狂、獨特，它并不一定適合每個網(wǎng)站。

換句話來說，就是 CSShake 所提供的動效其實是獨一無二的，這也是為什么它會存在于這個列表當中。
?

7. Mo.js

通過細節(jié)仔細對比了諸多的 JavaScript 庫之后，不得不說 Mo.js 是最好的動效庫之一。Mo.JS 非常的龐大，而且它是完全為UI/UX設計而生的動效庫。

關(guān)于 Mo.js 有大量的文檔和教程，它的代碼操作并不復雜，了解之后就可以輕松掌握。

它有著許多令人驚嘆的功能，無論是導航欄，還是LOGO或者其他復雜的元素，它都能夠?qū)⑺麄兒侠淼膭赢嫽?/p>

8. Animate Plus

Animate Plus 是一個輕量級的動效庫，它只有2KB，但是它有著自定義 JavaScript 動畫所需的全部基本功能。

使用npm你可以輕松地將 Animate Plus 安裝好，你只需要按照Github 上的代碼進行設置即可。其中所包含的絕大多數(shù)都是基本的Demo，所以你不會碰到復雜的問題，不過通過Github，你會找到所有你需要的選項和方法。

9. Bounce.js

只需要點擊幾下，你就可以借助Bounce.js創(chuàng)造出強大的CSS3 和 JS動畫了。

在主頁上，你會找到一個模塊化的自定義動畫生成器，通過這種方式，Bounce.js 會幫你將特定的功能添加到你的頁面上，無需添加額外的代碼。

和其他的同類工具不同的地方在于，它不僅僅是一個庫，而是有這用戶可以直接操作的實際功能，它帶有一個完整的網(wǎng)頁構(gòu)建器。Bounce.js 是為數(shù)不多的可以直接在瀏覽器中進行設計和設置的動畫庫之一。
?

10. Magic

Magic 可能是最有趣的動效庫之一。它集合了許多基于CSS3的動畫效果，并且?guī)в性S多在別的地方根本找不到的自定義樣式。這是一個非常大的CSS3代碼庫合集，你也會在這里學會許多巧妙的動畫設計技巧。

【2018年設計趨勢，一個都不要錯過】

1. 《2018年，這10個LOGO設計趨勢值得你關(guān)注》
2. 《超全面總結(jié)！2017年UI設計領(lǐng)域流行過這21個設計趨勢》
3. 《掌握這12個移動端UX設計趨勢，你就掌控了2018年》
4. 《這款獨特的紫色，是為你指引2018年設計方向的年度潘通色》

本文由優(yōu)設網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com