動效設計是2018年的熱門趨勢之一。如果你仔細找找的話，會發現許多有趣的用來建構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代碼庫合集，你也會在這裡學會許多巧妙的動畫設計技巧。
原文釋出時間：2018年02月04日
作者：Geek豪哥
本文來源：
igeekbar如需轉載請聯系原作者