動效設計是2018年的熱門趨勢之一。 當然， 創造動效並沒有必要從0開始， 有大把的設計專案可以供你快速上手， 納入到設計專案當中去。
如果你仔細找找的話， 會發現許多有趣的用來構建UI動效的工具， 而這些素材和工具正在成為越來越多設計項目中不可或缺的催化劑。 必須承認， 這些代碼生成器和動畫工具能設計師和前端事半功倍。
今天的文章， 我們將會推薦10個靠譜的開源免費網頁動效庫， 幫你設計加速。
1. GSAPGSAP 可能目前最炫酷的免費動畫庫之一了。 它運行於純粹的 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. TuesdayTuesday 所提供的動畫最令人著迷的地方， 是其中動畫都非常的簡單、有用。 借助這個庫， 你可以有效的控制頁面中元素的出現和消失的方式。
這些動畫並不是那種炫酷屌炸天的， 相反它們是非常微妙的， 真正從美學和用戶體驗的層面提升整個頁面的設計。
Tuesday 是純粹的CSS代碼， 幾乎可以和任何網站無縫地銜接起來。
6. CSShake坦率的講， 我從來沒有見過比 CSShake 更加奇怪或者有趣的 CSS庫了。 它所帶來的動畫效果非常的瘋狂、獨特，
換句話來說， 就是 CSShake 所提供的動效其實是獨一無二的， 這也是為什麼它會存在於這個列表當中。
7. Mo.js
通過細節仔細對比了諸多的 JavaScript 庫之後， 不得不說 Mo.js 是最好的動效庫之一。 Mo.JS 非常的龐大， 而且它是完全為UI/UX設計而生的動效庫。
關於 Mo.js 有大量的文檔和教程， 它的代碼操作並不複雜， 瞭解之後就可以輕鬆掌握。
它有著許多令人驚歎的功能， 無論是巡覽列， 還是LOGO或者其他複雜的元素， 它都能夠將他們合理的動畫化。
8. Animate PlusAnimate Plus 是一個羽量級的動效庫， 它只有2KB， 但是它有著自訂 JavaScript 動畫所需的全部基本功能。
使用npm你可以輕鬆地將 Animate Plus 安裝好， 你只需要按照Github 上的代碼進行設置即可。 其中所包含的絕大多數都是基本的Demo， 所以你不會碰到複雜的問題， 不過通過Github， 你會找到所有你需要的選項和方法。
9. Bounce.js只需要點擊幾下， 你就可以借助Bounce.js創造出強大的CSS3 和 JS動畫了。
在主頁上， 你會找到一個模組化的自訂動畫生成器， 通過這種方式， Bounce.js 會幫你將特定的功能添加到你的頁面上， 無需添加額外的代碼。
和其他的同類工具不同的地方在於，它不僅僅是一個庫，而是有這用戶可以直接操作的實際功能，它帶有一個完整的網頁構建器。Bounce.js 是為數不多的可以直接在流覽器中進行設計和設置的動畫庫之一。
10. MagicMagic 可能是最有趣的動效庫之一。它集合了許多基於CSS3的動畫效果，並且帶有許多在別的地方根本找不到的自訂樣式。這是一個非常大的CSS3代碼庫合集，你也會在這裡學會許多巧妙的動畫設計技巧。
------
作者：JAKE ROCHELEAU
譯者：陳子木
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！
無需添加額外的代碼。和其他的同類工具不同的地方在於，它不僅僅是一個庫，而是有這用戶可以直接操作的實際功能，它帶有一個完整的網頁構建器。Bounce.js 是為數不多的可以直接在流覽器中進行設計和設置的動畫庫之一。
10. MagicMagic 可能是最有趣的動效庫之一。它集合了許多基於CSS3的動畫效果，並且帶有許多在別的地方根本找不到的自訂樣式。這是一個非常大的CSS3代碼庫合集，你也會在這裡學會許多巧妙的動畫設計技巧。
------
作者：JAKE ROCHELEAU
譯者：陳子木
商業轉載請聯繫作者獲得授權，非商業轉載請注明出處！