你可以用網頁上的UI動畫來建立一些瘋狂的東西，因為使用者參與變得很重要，這正快速地成為現代網站的準則。如果你看看四周會發現很多程式產生器和自定義工具來幫助動畫設計，但你也可以找到免費的資源庫，他們可以讓你在撰寫程式的過程中省時。
這些是作者精挑細選最好的10個開源網頁動畫資源。這包含一個JavaScript資源和純CSS動畫的混合。兩種風格都很棒，各有各的優缺點。無論你選擇哪種方式，我保證你會喜歡這份清單的！
1. GSAP
GSAP對開發人員是最酷的免費資源之一。它運作在純JavaScript上，而且是你可以使用更強大的動畫庫之一。它符合HTML5的規範，並與現代所有的瀏覽器都有很好的協同，更不用說製作團隊時常更新這個資源庫的新功能。它可以與SVG、canvas元素，甚至jQuery物件，及其他相關的資源庫(如EaselJS)一起使用。
如果你需要一個強大的網頁動畫資源，這絕對值得一看！裡面有很多小的資源，你可以嘗試使用這些去處理簡單的任務。
2. Anime.js
當我第一次發現Anime.js時，簡直被迷住了。這東西非常強大，超越了簡單的UI / UX動畫。你可以用Anime.js設計美的動畫在logo、按鈕、圖像等各種你想得到的元素上。它支持所有典型的使用者觸發器，例如：點擊、把游標放在電腦螢幕上的某個位置、滑動，你可以使用它來定義一連串的動畫。
如果你看看這份文件，你可以找到一堆嵌入到頁面中的例子，此外，在CodePen上收集完整的Anime.js範例供你研讀。
3. Wicked CSS
網站：http://kristofferandreasen.github.io/wickedCSS/
Wicked CSS是一個比較新的資源平台，運作在CSS3屬性上，提供一些蠻不可思議的效果。從首頁面會發現一堆可以在瀏覽器中正確測試的live demos。這些包括物體旋轉、翻轉、滑入，及許多類似的動畫效果。其中一些可能很簡單，你可以自己去創建，但其他也有很複雜的動畫，這讓Wicked CSS變得如此有趣。
4. Animate CSS
網站：https://daneden.github.io/animate.css/
網頁動畫的權威資源或許是Animate.css，這個開放源始碼平台是在幾年前發布的，相較起來它仍然更具有價值。開發人員Daniel Eden創建了這個項目，以簡化的方式在網頁上加入自定義的CSS3動畫。這些年來，它已經發展成為一個成熟且完整的動畫庫，足以運作任何重大項目。
首頁提供了大量的demo，所以你可以測試出動畫風格。另外，在GitHub上還有很多很棒的文件。
5. Tuesday
網站：http://shakrmedia.github.io/tuesday/
我最喜歡Tuesday的事就是這些動畫的簡單性，利用這個資源，你可以控制元素如何在頁面中出現和消失。但是這些動畫不是過於頂尖或超級迷人的。他們反而是比較精細微妙的效果，提升了頁面的美感，但不減損內容或使用者體驗。
我沒有看到許多網站使用Tuesday，但它也許是最乾淨的資源庫。它的原理為純CSS，且動畫風格相當合理。他們可以與任何網站混合運用，目前已經有十幾種淡入、淡出風格可以使用。
6. CSShake
網站：https://elrumordelaluz.github.io/csshake/
我還沒有看到像CSShake那樣有趣、奇特的CSS資源平台。這裡有一部分瘋狂、一部分獨特，所以它並不一定適合每個網站。
之所以會入這個清單的原因，是因為我想不出有類似這些特色的資源庫了。使用CSShake，你可以將動畫懸停在各種類型的搖動效果上，這些都在純CSS上運作。從溫和的動作到劇烈的搖晃，以及介於兩者間的任何效果，這個資源庫都有一個非常簡單的使用方式。
7. Mo.js
在許多詳細的動畫JavaScript資源庫中，不得不說Mo.js是最好的之一。這個資源非常龐大，而且它是為了UI、UX動畫上的動態圖形而設計的。但是，如果你了解它是如何運作，你就可以在任何地方使用它。程式碼很容易操作，還有一系列教學可以讓你的生活更輕鬆。
不過它確實有很多令人驚艷的功能，無論是動畫導航欄、logo，或是其他複雜的物體，都能簡化動畫運作過程。
8. Animate Plus
網站：https://github.com/bendc/animateplus
Animate Plus是一個超級輕量、簡單的動畫庫。縮小時只有2KB，它具有使用者自定義的JavaScript動畫所需的所有基本功能。使用npm可以很輕易的安裝，你可以按照GitHub上的程式碼進行設置。這些大多數只是基本的demo，所以不會碰到任何復雜的問題，但你也可以在GitHub上找到所有的選項和回調(callback)方法。
看一下這個範例，在這專案的儲存庫(Repository)裡，利用程式拉出直線。
內容不是很多，但它會告訴你如何安裝Animate Plus，並從頭開始執行一些預設的程式碼。
9. Bounce.js
在Bounce.js，你只需點擊幾下，就可以製作出強大的CSS3和JS動畫。在首頁上，你會先看到一個自定義動畫生成器的模組。通過這種方式，你不需要再寫額外的程式碼，就可以將你所需要的特定動畫功能加到頁面上。
Bounce.js和其他平台想較之下，最大的不同在於，它不僅只是一個資源庫。雖然你可以在GitHub上找到安裝資訊，但它不僅是一個基本的腳本。實際上附帶著一個網頁建構器，所以Bounce.js是你可以在瀏覽器中設計的少數動畫庫之一。
10. Magic
網站：https://github.com/miniMAC/magic
有趣的動畫與活潑最能形容Magic資源庫了。整個網站收集基於CSS3的動畫，而且有許多別的地方沒有的自定義樣式。這裡收集了非常多的CSS3程式碼，在這裡你也能找到很多巧妙的技巧。旋轉、透視翻轉、淡化效果，豐富的資源足以滿足動畫需求。
如果你看這個demo頁，在動作後你可以看到這些效果。
就算這個資源庫雖然比其他CSS3資源庫更小，它不能與Tuesday或Animate.css相比。但它有很多巧妙的網頁動畫，你在其他資源庫並不會找到。
如果你喜歡我的內容，就多給我拍手鼓勵唷！
10-40下表示對內容的肯定😍
50下就給我繼續寫下去的動力🥰不管你有什麼想說的，都歡迎留言或私訊給我喔！🤞