11 個好用的JavaScript 動畫庫，附中獎者名單

1、Three.js

位址：https://github.com/mrdoob/three.js/

超過46K的星星，這個流行的庫提供了非常多的3D顯示功能，以一種直覺的方式使用 WebGL。這個庫提供了<canvas>、 <svg>、css3D 和 WebGL渲染器，讓咱們在裝置和浏覽器之間建立豐富的互動體驗。該庫于2010年4月首次推出，目前仍有近1000名貢獻者在開發中。

2、Anime.js

位址：https://github.com/juliangarnier/anime

超過20K的星星，Anime 是一個 js 動畫庫，可以處理css屬性，單個CSS轉換，SVG 或任 何 DOM 屬性以及 js 對象。此庫允許咱們連結多個動畫屬性，将多個執行個體同步，建立時間軸等。

3、Mo.js

位址：https://github.com/mojs/mojs

超過 14K 星星，是一個用于 Web 的動态圖形工具帶，具有簡單的聲明 API，跨裝置相容性和超過1500個單元測試。咱們可以在 DOME 或SVG DOME周圍移動東西或建立唯一的 mo.js 對象。雖然文檔有些稀缺，但是示例很豐富，這裡有CSS技巧的介紹。

4、Velocity

位址：https://github.com/julianshapiro/velocity

超過 15k 星星,Velocity是一個快速的 JS 動畫引擎，擁有與jQuery的 $.animate() 相同的API。它具有彩色動畫、轉換、循環、畫架、SVG支援和滾動。這裡是Velocity的高性能引擎的分解，這裡是使用該庫的 SVG 動畫的介紹。

5、 Popmotion

位址：https://github.com/popmotion/popmotion​

超過 14K 星星，這個動畫庫大小隻有 11 kb。它允許開發人員從動作建立動畫和互動，這些動作是可以啟動和停止，可以使用 CSS、SVG、react、three 建立，js 和任何接受數字作為輸入的 API。

6、 Vivus

位址：https://github.com/maxwellito/vivus​

超過 10k 星星，Vivus是一個零依賴的 JS 類，可以讓你為SVG制作動畫，讓它們具有被繪制的外觀。咱們可以使用許多可用動畫之一，或建立自定義腳本來繪制SVG。檢視Vivus-instant擷取實際示例，親自動動手練習一下。

7、GreenSock JS

位址：https://github.com/greensock/GSAP​

GSAP 是一個JS 庫，用于建立高性能、零依賴、跨浏覽器動畫，據稱在超過400萬個網站上使用。GSAP是靈活的，可以與 React、vue、Angular 和 vanilla JS 協同工作。GSDevtools 還可以幫助使用 GSAP 建構 dubug 動畫。

8、 Scroll Reveal

位址：https://github.com/jlmakes/scrollreveal​

擁有15K顆星星和零依賴，這個庫為 web 和移動浏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動中的内容。它支援多種簡潔的效果類型，甚至允許你使用自然語言定義動畫。這裡有一個簡短的 SitePoint教程。

9、Hover (CSS)

位址：https://github.com/IanLunn/Hover​

超過 20k 星星，Hover 提供了CSS3支援的懸停效果集合，可應用于連結、按鈕、徽标、SVG、特色圖像等，在CSS、Sass和LESS中可用。您=可以複制和粘貼希望在自己的樣式表中使用的效果，或者引用樣式。

10、Kute.js

位址：https://github.com/thednp/kute.js/​

一個完全成熟的原生 JS 動畫引擎，具有跨浏覽器動畫的基本功能。重點是代碼品質，靈活性，性能和大小（核心引擎17k 和 gzipped 5.5k） - 這是一個示範。該庫也是可擴充的，是以你可以添加自己的功能。

11、 Typed.js

位址：https://github.com/mattboldt/typed.js​

超過 7k 星星，這個庫基允許你以標明的速度為字元串建立打字動畫。你還可以在頁面上放置 html div 并從中讀取以允許搜尋引擎和禁用 JS 的使用者通路，由Slack和其他人使用，這個庫既流行又非常有用。

​