為了保證的可讀性，本文采用意譯而非直譯。
1.Three.js
超過46K的星星，這個流行的庫提供了非常多的3D顯示功能，以一種直觀的方式使用 WebGL。這個庫提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，讓咱們在設備和瀏覽器之間創建豐富的交互體驗。該庫於2010年4月首次推出，目前仍有近1000名貢獻者在開發中。
2. Anime.js
超過20K的星星，Anime 是一個 JS 動畫庫，可以處理CSS屬性，單個CSS轉換，SVG 或任 何 DOM 屬性以及 JS 對象。 此庫允許咱們鏈接多個動畫屬性，將多個實例同步，創建時間軸等。
3.Mo.js
超過 14K 星星，是一個用於 Web 的動態圖形工具帶，具有簡單的聲明 API，跨設備兼容性和超過1500個單元測試。 咱們可以在 DOME 或SVG DOME周圍移動東西或創建唯一的 mo.js 對象。雖然文檔有些稀缺，但是示例很豐富，這里有CSS技巧的介紹。
4. Velocity
超過 15k 星星,Velocity是一個快速的 JS 動畫引擎，擁有與jQuery的 $.animate() 相同的API。它具有彩色動畫、轉換、循環、畫架、SVG支持和滾動。這里是Velocity的高性能引擎的分解，這里是使用該庫的 SVG 動畫的介紹。
5. Popmotion
超過 14K 星星，這個動畫庫大小只有 11 kb。它允許開發人員從動作創建動畫和交互，這些動作是可以啟動和停止，可以使用 CSS、SVG、React、three 創建，js 和任何接受數字作為輸入的 API。
6. Vivus
超過 10k 星星，Vivus是一個零依賴的 JS 類，可以讓你為SVG制作動畫，讓它們具有被繪制的外觀。 咱們可以使用許多可用動畫之一，或創建自定義腳本來繪制SVG。 查看Vivus-instant獲取實際示例，親自動動手練習一下。
7. GreenSock JS
GSAP 是一個JS 庫，用於創建高性能、零依賴、跨瀏覽器動畫，據稱在超過400萬個網站上使用。GSAP是靈活的，可以與 React、Vue、Angular 和 vanilla JS 協同工作。GSDevtools 還可以幫助使用 GSAP 構建dubug 動畫。
8. Scroll Reveal
擁有15K顆星星和零依賴，這個庫為 web 和移動瀏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動中的內容。它支持多種簡潔的效果類型，甚至允許你使用自然語言定義動畫。這里有一個簡短的 SitePoint教程。
9. Hover (CSS)
超過 20k 星星，Hover 提供了CSS3支持的懸停效果集合，可應用於鏈接、按鈕、徽標、SVG、特色圖像等，在CSS、Sass和LESS中可用。您=可以復制和粘貼希望在自己的樣式表中使用的效果，或者引用樣式。
10. Kute.js
一個完全成熟的原生 JS 動畫引擎，具有跨瀏覽器動畫的基本功能。 重點是代碼質量，靈活性，性能和大小（核心引擎17k 和 gzipped 5.5k） - 這是一個演示。 該庫也是可擴展的，因此你可以添加自己的功能。
11. Typed.js
超過 7k 星星，這個庫基允許你以選定的速度為字符串創建打字動畫。 你還可以在頁面上放置 HTML div 並從中讀取以允許搜索引擎和禁用 JS 的用戶訪問，由Slack和其他人使用，這個庫既流行又非常有用。
編輯中可能存在的bug沒法實時知道，事后為了解決這些bug,花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
作者：前端小智
鏈接：https://juejin.im/post/5dd7278cf265da4ea640b398
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。