當(dāng)我瀏覽網(wǎng)頁(yè)尋找一個(gè)整潔的 Javascript 動(dòng)畫(huà)庫(kù)時(shí)，我發(fā)現(xiàn)很多 “推薦” 的動(dòng)畫(huà)庫(kù)都有一段時(shí)間沒(méi)維護(hù)了。

經(jīng)過(guò)一些研究，我收集了 15 個(gè)最好的 Javascript 動(dòng)畫(huà)庫(kù)，你可以放心在你的應(yīng)用程序中使用。在文章最后我還添加了一些有用的庫(kù)，但是有一部分很久沒(méi)維護(hù)了。

使用純CSS

在深入研究這些庫(kù)之前，不要忘記使用純 CSS 。 為什么？ 因?yàn)樗菢?biāo)準(zhǔn)的，它可以提高性能（GPU），提供向后和向前兼容性，它可能是創(chuàng)建動(dòng)畫(huà)的最有效方法。 這里有 10 個(gè)純 CSS 實(shí)現(xiàn)的動(dòng)畫(huà)示例。

1、 Three.js

超過(guò) 43K 的 star ，這個(gè)流行庫(kù)是在瀏覽器上創(chuàng)建 3D 動(dòng)畫(huà)的好方法，以直觀的方式使用 WebGL 。 這個(gè)庫(kù)提供 <canvas>，<svg>，CSS 3D 和 WebGL 渲染器，讓我們可以跨設(shè)備和瀏覽器創(chuàng)建豐富的交互式體驗(yàn)。 該庫(kù)于 2010 年 4 月首次推出，目前仍由近 1,000 名貢獻(xiàn)者開(kāi)發(fā)。

Github 倉(cāng)庫(kù)：https://github.com/mrdoob/three.js/

2、Anime.js

超過(guò) 20K 的 star，Anime 是一個(gè) JavaScript 動(dòng)畫(huà)庫(kù)，可以處理 CSS 屬性，單個(gè) CSS 轉(zhuǎn)換，SVG 或任何 DOM 屬性以及JavaScript 對(duì)象。 此庫(kù)允許您鏈接多個(gè)動(dòng)畫(huà)屬性，將多個(gè)實(shí)例同步，創(chuàng)建時(shí)間軸等。

Github 倉(cāng)庫(kù)：https://github.com/juliangarnier/anime

3、Mo.js

這個(gè)庫(kù)有 14K star，是一個(gè)用于 Web 的動(dòng)態(tài)圖形工具帶，具有簡(jiǎn)單的聲明性 API ，跨設(shè)備兼容性和超過(guò) 1500 個(gè)單元測(cè)試。 您可以在 DOME 或 SVG DOME 周圍移動(dòng)?xùn)|西或創(chuàng)建唯一的 mo.js 對(duì)象。 雖然文檔很少，但是示例很豐富，這里有 CSS 技巧的介紹。

Github 倉(cāng)庫(kù)：https://github.com/legomushroom/mojs

4、Velocity

這個(gè)庫(kù)有 15K star，Velocity 是一個(gè)快速的 Javascript 動(dòng)畫(huà)引擎，具有與 jQuery 的 $ .animate() 相同的 API 。 它具有色彩動(dòng)畫(huà)，轉(zhuǎn)換，循環(huán)，緩動(dòng)，SVG支持和滾動(dòng)。 這是 Velocity 高性能引擎的分解，這里是使用該庫(kù)的 SVG 動(dòng)畫(huà)的介紹。

Github 倉(cāng)庫(kù)：https://github.com/julianshapiro/velocity

5、Popmotion

這個(gè)庫(kù)有 14K star，這個(gè)動(dòng)畫(huà)庫(kù)只有 11kb。 它允許開(kāi)發(fā)人員從動(dòng)作創(chuàng)建動(dòng)畫(huà)和交互，動(dòng)作是可以啟動(dòng)和停止，并使用 CSS ，SVG，React，three.js 和任何接受數(shù)字作為輸入的 API 創(chuàng)建。

Github 倉(cāng)庫(kù)：https://github.com/Popmotion/popmotion

6、Vivus

超過(guò) 10K 的 star ， Vivus是一個(gè)零依賴的 JavaScript 類，可以讓你為 SVG 制作動(dòng)畫(huà)，讓它們具有被繪制的外觀。 您可以使用許多可用動(dòng)畫(huà)之一，或創(chuàng)建自定義腳本來(lái)繪制 SVG 。 查看 Vivus-instant 獲取實(shí)時(shí)示例，你也可以親自動(dòng)手試一下。

Github 倉(cāng)庫(kù)：https://github.com/maxwellito/vivus

7、GreenSock JS

GSAP 是一個(gè) JavaScript 庫(kù)，用于創(chuàng)建高性能，零依賴性，跨瀏覽器動(dòng)畫(huà)，聲稱在超過(guò) 400 萬(wàn)個(gè)網(wǎng)站中使用。 GSAP 非常靈活，可以與 React，Vue，Angular 和 vanilla JS 一起使用。 GSDevtools 還可以幫助改進(jìn)使用 GSAP 構(gòu)建的動(dòng)畫(huà)。

Github 倉(cāng)庫(kù)：https://github.com/greensock/GreenSock-JS

8、Scroll Reveal

憑借 15K star 和零依賴，該庫(kù)為 Web 和 移動(dòng)端瀏覽器提供了簡(jiǎn)單的滾動(dòng)動(dòng)畫(huà)，以動(dòng)畫(huà)的方式顯示滾動(dòng)內(nèi)容。 它支持多種簡(jiǎn)潔的效果，甚至可以讓您使用自然語(yǔ)言定義動(dòng)畫(huà)。 這是一個(gè)簡(jiǎn)短的 SitePoint 教程。

Github 倉(cāng)庫(kù)：https://github.com/jlmakes/scrollreveal

9、Hover (CSS)

這是一個(gè)CSS庫(kù)。 有 20K star，Hover 提供了 CSS3 驅(qū)動(dòng)的鼠標(biāo) hover 效果的集合，可應(yīng)用于 鏈接，按鈕，logo，SVG，特色圖像等，可在 CSS，Sass 和 LESS 中使用。 您可以復(fù)制并粘貼要在自己的樣式表中使用的效果或引用樣式表。

Github 倉(cāng)庫(kù)：https://github.com/IanLunn/Hover

10、Kute.js

一個(gè)完全成熟的原生JavaScript動(dòng)畫(huà)引擎，具有跨瀏覽器動(dòng)畫(huà)的基本功能。 重點(diǎn)是代碼質(zhì)量，靈活性，性能和大?。ê诵囊媸?7k min 和 5.5k gzipped） – 這是 一個(gè)演示。 該庫(kù)也是 可擴(kuò)展的，因此您可以添加自己的功能。

Github 倉(cāng)庫(kù)：https://github.com/thednp/kute.js/

11、Typed.js

這個(gè)庫(kù) 6K star，基本上允許您以選定的速度為字符串創(chuàng)建打字動(dòng)畫(huà)。 您還可以在頁(yè)面上放置 HTML div 并從中讀取以允許搜索引擎和禁用 JavaScript 的用戶訪問(wèn)。 Slack 和 其他人都使用過(guò)這個(gè)庫(kù)，它很受歡迎，而且非常有用。

Github 倉(cāng)庫(kù)：https://github.com/mattboldt/typed.js

還可以看看：iTyped

12、Airbnb 的 Lottie

Lottie 是一個(gè)用于 Web 和 iOS 的移動(dòng)端庫(kù)，它使用 Bodymovin解析 Adobe After Effects 動(dòng)畫(huà)形式導(dǎo)出的 json ，并以原生方式呈現(xiàn)。

Github 倉(cāng)庫(kù)：<a href=https://github.com/airbnb/lottie-web” target=”_blank”>https://github.com/airbnb/lottie-web

13、Animate.css (CSS)

Animate.css 是最小和最易于使用的 CSS 動(dòng)畫(huà)庫(kù)之一。 將 Animate 庫(kù)應(yīng)用于項(xiàng)目就像鏈接 CSS 并將所需的 CSS 類添加到HTML 元素一樣簡(jiǎn)單。 如果您愿意，還可以使用 jQuery 觸發(fā)特定事件的動(dòng)畫(huà)。

Github 倉(cāng)庫(kù)：<a href=https://github.com/daneden/animate.css” target=”_blank”>https://github.com/daneden/animate.css

14、Magic Animations (CSS)

Magic Animations 是一款令人印象深刻的動(dòng)畫(huà)庫(kù)。 它有許多不同的動(dòng)畫(huà)，其中許多效果是這個(gè)庫(kù)獨(dú)有的。 與 Animate.css 一樣，您只需導(dǎo)入 CSS 文件即可實(shí)現(xiàn) Magic 。 您還可以使用jQuery中的動(dòng)畫(huà)。 該項(xiàng)目提供了一個(gè)特別酷的演示應(yīng)用程序。

Github 倉(cāng)庫(kù)：<a href=https://github.com/miniMAC/magic” target=”_blank”>https://github.com/miniMAC/magic

15、CSShake (CSS)

CSShake 提供了一個(gè)專門為 web 頁(yè)面中的搖晃元素而設(shè)計(jì)的 CSS 庫(kù)。正如您所預(yù)期的，有許多變體可用來(lái)?yè)u晃 web 組件。

Github 倉(cāng)庫(kù)：https://github.com/elrumordelaluz/csshake