當我瀏覽網頁尋找一個整潔的 Javascript 動畫庫時，我發現很多 “推薦” 的動畫庫都有一段時間沒維護了。

經過一些研究，我收集了 15 個最好的 Javascript 動畫庫，你可以放心在你的應用程序中使用。在文章最後我還添加了一些有用的庫，但是有一部分很久沒維護了。

使用純CSS

在深入研究這些庫之前，不要忘記使用純 CSS 。 為什麼？ 因為它是標準的，它可以提高性能（GPU），提供向後和向前兼容性，它可能是創建動畫的最有效方法。 這裡有 10 個純 CSS 實現的動畫示例。

1、 Three.js

Three.js

超過 43K 的 star ，這個流行庫是在瀏覽器上創建 3D 動畫的好方法，以直觀的方式使用 WebGL 。 這個庫提供 <canvas>，<svg>，CSS 3D 和 WebGL 渲染器，讓我們可以跨設備和瀏覽器創建豐富的交互式體驗。 該庫於 2010 年 4 月首次推出，目前仍由近 1,000 名貢獻者開發。

Github 倉庫：https://github.com/mrdoob/three.js/

2、Anime.js

Anime.js

超過 20K 的 star，Anime 是一個 JavaScript 動畫庫，可以處理 CSS 屬性，單個 CSS 轉換，SVG 或任何 DOM 屬性以及JavaScript 對象。 此庫允許您鏈接多個動畫屬性，將多個實例同步，創建時間軸等。

Github 倉庫：https://github.com/juliangarnier/anime

3、Mo.js

Mo.js

這個庫有 14K star，是一個用於 Web 的動態圖形工具帶，具有簡單的聲明性 API ，跨設備兼容性和超過 1500 個單元測試。 您可以在 DOME 或 SVG DOME 周圍移動東西或創建唯一的 mo.js 對象。 雖然文檔很少，但是示例很豐富，這裡有 CSS 技巧的介紹。

Github 倉庫：https://github.com/legomushroom/mojs

4、Velocity

這個庫有 15K star，Velocity 是一個快速的 Javascript 動畫引擎，具有與 jQuery 的 $ .animate() 相同的 API 。 它具有色彩動畫，轉換，循環，緩動，SVG支持和滾動。 這是 Velocity 高性能引擎的分解，這裡是使用該庫的 SVG 動畫的介紹。

Github 倉庫：https://github.com/julianshapiro/velocity

5、Popmotion

Popmotion

這個庫有 14K star，這個動畫庫只有 11kb。 它允許開發人員從動作創建動畫和交互，動作是可以啟動和停止，並使用 CSS ，SVG，React，three.js 和任何接受數字作為輸入的 API 創建。

Github 倉庫：https://github.com/Popmotion/popmotion

6、Vivus

Vivus

超過 10K 的 star ， Vivus是一個零依賴的 JavaScript 類，可以讓你為 SVG 製作動畫，讓它們具有被繪製的外觀。 您可以使用許多可用動畫之一，或創建自定義腳本來繪製 SVG 。 查看 Vivus-instant 獲取實時示例，你也可以親自動手試一下。

Github 倉庫：https://github.com/maxwellito/vivus

7、GreenSock JS

GreenSock JS

GSAP 是一個 JavaScript 庫，用於創建高性能，零依賴性，跨瀏覽器動畫，聲稱在超過 400 萬個網站中使用。 GSAP 非常靈活，可以與 React，Vue，Angular 和 vanilla JS 一起使用。 GSDevtools 還可以幫助改進使用 GSAP 構建的動畫。

Github 倉庫：https://github.com/greensock/GreenSock-JS

8、Scroll Reveal

Scroll Reveal

憑藉 15K star 和零依賴，該庫為 Web 和 移動端瀏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動內容。 它支持多種簡潔的效果，甚至可以讓您使用自然語言定義動畫。 這是一個簡短的 SitePoint 教程。

Github 倉庫：https://github.com/jlmakes/scrollreveal

9、Hover (CSS)

Hover (CSS)

這是一個CSS庫。 有 20K star，Hover 提供了 CSS3 驅動的鼠標 hover 效果的集合，可應用於 鏈接，按鈕，logo，SVG，特色圖像等，可在 CSS，Sass 和 LESS 中使用。 您可以複製並粘貼要在自己的樣式表中使用的效果或引用樣式表。

Github 倉庫：https://github.com/IanLunn/Hover

10、Kute.js

Kute.js

一個完全成熟的原生JavaScript動畫引擎，具有跨瀏覽器動畫的基本功能。 重點是代碼質量，靈活性，性能和大小（核心引擎是17k min 和 5.5k gzipped） – 這是 一個演示。 該庫也是 可擴展的，因此您可以添加自己的功能。

Github 倉庫：https://github.com/thednp/kute.js/

11、Typed.js

Typed.js

這個庫 6K star，基本上允許您以選定的速度為字符串創建打字動畫。 您還可以在頁面上放置 HTML div 並從中讀取以允許搜索引擎和禁用 JavaScript 的用戶訪問。 Slack 和 其他人都使用過這個庫，它很受歡迎，而且非常有用。

Github 倉庫：https://github.com/mattboldt/typed.js

還可以看看：iTyped

12、Airbnb 的 Lottie

Lottie

Lottie 是一個用於 Web 和 iOS 的移動端庫，它使用 Bodymovin解析 Adobe After Effects 動畫形式導出的 json ，並以原生方式呈現。

Github 倉庫：<a href=https://github.com/airbnb/lottie-web” target=”_blank”>https://github.com/airbnb/lottie-web

13、Animate.css (CSS)

Animate.css

Animate.css 是最小和最易於使用的 CSS 動畫庫之一。 將 Animate 庫應用於項目就像鏈接 CSS 並將所需的 CSS 類添加到HTML 元素一樣簡單。 如果您願意，還可以使用 jQuery 觸發特定事件的動畫。

Github 倉庫：<a href=https://github.com/daneden/animate.css” target=”_blank”>https://github.com/daneden/animate.css

14、Magic Animations (CSS)

Magic Animations (CSS)

Magic Animations 是一款令人印象深刻的動畫庫。 它有許多不同的動畫，其中許多效果是這個庫獨有的。 與 Animate.css 一樣，您只需導入 CSS 文件即可實現 Magic 。 您還可以使用jQuery中的動畫。 該項目提供了一個特別酷的演示應用程序。

Github 倉庫：<a href=https://github.com/miniMAC/magic” target=”_blank”>https://github.com/miniMAC/magic

15、CSShake (CSS)

CSShake (CSS)

CSShake 提供了一個專門為 web 頁面中的搖晃元素而設計的 CSS 庫。正如您所預期的，有許多變體可用來搖晃 web 組件。

Github 倉庫：https://github.com/elrumordelaluz/csshake