當(dāng)我瀏覽網(wǎng)頁尋找一個整潔的 Javascript 動畫庫時豆挽，我發(fā)現(xiàn)很多 “推薦” 的動畫庫都有一段時間沒維護(hù)了。
經(jīng)過一些研究灶体，我收集了 15 個最好的 Javascript 動畫庫鲫剿，你可以放心在你的應(yīng)用程序中使用。在文章最后我還添加了一些有用的庫涂佃，但是有一部分很久沒維護(hù)了励翼。
使用純CSS
在深入研究這些庫之前，不要忘記使用純 CSS 辜荠。 為什么汽抚？ 因為它是標(biāo)準(zhǔn)的，它可以提高性能（GPU）伯病，提供向后和向前兼容性殊橙，它可能是創(chuàng)建動畫的最有效方法。 這里有 10 個純 CSS 實現(xiàn)的動畫示例。
1膨蛮、 Three.js
Three.js
超過 43K 的 star 叠纹，這個流行庫是在瀏覽器上創(chuàng)建 3D 動畫的好方法，以直觀的方式使用 WebGL 敞葛。 這個庫提供 <canvas>誉察，<svg>，CSS 3D 和 WebGL 渲染器惹谐，讓我們可以跨設(shè)備和瀏覽器創(chuàng)建豐富的交互式體驗持偏。 該庫于 2010 年 4 月首次推出，目前仍由近 1,000 名貢獻(xiàn)者開發(fā)氨肌。
Github 倉庫：https://github.com/mrdoob/three.js/
2鸿秆、Anime.js
Anime.js
超過 20K 的 star，Anime 是一個 JavaScript 動畫庫怎囚，可以處理 CSS 屬性卿叽，單個 CSS 轉(zhuǎn)換，SVG 或任何 DOM 屬性以及JavaScript 對象恳守。 此庫允許您鏈接多個動畫屬性考婴，將多個實例同步，創(chuàng)建時間軸等催烘。
Github 倉庫：https://github.com/juliangarnier/anime
3沥阱、Mo.js
Mo.js
這個庫有 14K star，是一個用于 Web 的動態(tài)圖形工具帶伊群，具有簡單的聲明性 API 考杉，跨設(shè)備兼容性和超過 1500 個單元測試。 您可以在 DOME 或 SVG DOME 周圍移動?xùn)|西或創(chuàng)建唯一的 mo.js 對象舰始。 雖然文檔很少奔则，但是示例很豐富，這里有 CSS 技巧的介紹蔽午。
Github 倉庫：https://github.com/legomushroom/mojs
4易茬、Velocity
這個庫有 15K star，Velocity 是一個快速的 Javascript 動畫引擎及老，具有與 jQuery 的 $ .animate() 相同的 API 抽莱。 它具有色彩動畫，轉(zhuǎn)換骄恶，循環(huán)食铐，緩動，SVG支持和滾動僧鲁。 這是 Velocity 高性能引擎的分解虐呻，這里是使用該庫的 SVG 動畫的介紹象泵。
Github 倉庫：https://github.com/julianshapiro/velocity
5、Popmotion
Popmotion
這個庫有 14K star斟叼，這個動畫庫只有 11kb偶惠。 它允許開發(fā)人員從動作創(chuàng)建動畫和交互，動作是可以啟動和停止朗涩，并使用 CSS 忽孽，SVG，React谢床，three.js 和任何接受數(shù)字作為輸入的 API 創(chuàng)建兄一。
Github 倉庫：https://github.com/Popmotion/popmotion
6、Vivus
Vivus
超過 10K 的 star 识腿， Vivus是一個零依賴的 JavaScript 類出革，可以讓你為 SVG 制作動畫，讓它們具有被繪制的外觀渡讼。 您可以使用許多可用動畫之一骂束，或創(chuàng)建自定義腳本來繪制 SVG 。 查看 Vivus-instant 獲取實時示例硝全，你也可以親自動手試一下栖雾。
Github 倉庫：https://github.com/maxwellito/vivus
7楞抡、GreenSock JS
GreenSock JS
GSAP 是一個 JavaScript 庫伟众，用于創(chuàng)建高性能，零依賴性召廷，跨瀏覽器動畫凳厢，聲稱在超過 400 萬個網(wǎng)站中使用。 GSAP 非常靈活竞慢，可以與 React先紫，Vue，Angular 和 vanilla JS 一起使用筹煮。 GSDevtools 還可以幫助改進(jìn)使用 GSAP 構(gòu)建的動畫遮精。
Github 倉庫：https://github.com/greensock/GreenSock-JS
8、Scroll Reveal
Scroll Reveal
憑借 15K star 和零依賴败潦，該庫為 Web 和 移動端瀏覽器提供了簡單的滾動動畫本冲，以動畫的方式顯示滾動內(nèi)容。 它支持多種簡潔的效果劫扒，甚至可以讓您使用自然語言定義動畫檬洞。 這是一個簡短的 SitePoint 教程。
Github 倉庫：https://github.com/jlmakes/scrollreveal
9沟饥、Hover (CSS)
Hover (CSS)
這是一個CSS庫添怔。 有 20K star湾戳，Hover 提供了 CSS3 驅(qū)動的鼠標(biāo) hover 效果的集合，可應(yīng)用于 鏈接广料，按鈕砾脑，logo，SVG性昭，特色圖像等拦止，可在 CSS，Sass 和 LESS 中使用糜颠。 您可以復(fù)制并粘貼要在自己的樣式表中使用的效果或引用樣式表汹族。
Github 倉庫：https://github.com/IanLunn/Hover
10、Kute.js
Kute.js
一個完全成熟的原生JavaScript動畫引擎其兴，具有跨瀏覽器動畫的基本功能顶瞒。 重點是代碼質(zhì)量，靈活性元旬，性能和大辛裥臁（核心引擎是17k min 和 5.5k gzipped） – 這是 一個演示。 該庫也是 可擴(kuò)展的匀归，因此您可以添加自己的功能坑资。
Github 倉庫：https://github.com/thednp/kute.js/
11、Typed.js
Typed.js
這個庫 6K star穆端，基本上允許您以選定的速度為字符串創(chuàng)建打字動畫袱贮。 您還可以在頁面上放置 HTML div 并從中讀取以允許搜索引擎和禁用 JavaScript 的用戶訪問。 Slack 和 其他人都使用過這個庫体啰，它很受歡迎攒巍，而且非常有用。
Github 倉庫：https://github.com/mattboldt/typed.js
還可以看看：iTyped
12荒勇、Airbnb 的 Lottie
Lottie
Lottie 是一個用于 Web 和 iOS 的移動端庫柒莉，它使用 Bodymovin解析 Adobe After Effects 動畫形式導(dǎo)出的 json ，并以原生方式呈現(xiàn)沽翔。
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 庫應(yīng)用于項目就像鏈接 CSS 并將所需的 CSS 類添加到HTML 元素一樣簡單仅偎。 如果您愿意跨蟹，還可以使用 jQuery 觸發(fā)特定事件的動畫。
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 一樣品姓，您只需導(dǎo)入 CSS 文件即可實現(xiàn) Magic 寝并。 您還可以使用jQuery中的動畫。 該項目提供了一個特別酷的演示應(yīng)用程序腹备。
Github 倉庫：<a href=https://github.com/miniMAC/magic” target=”_blank”>https://github.com/miniMAC/magic
15衬潦、CSShake (CSS)
CSShake (CSS)
CSShake 提供了一個專門為 web 頁面中的搖晃元素而設(shè)計的 CSS 庫。正如您所預(yù)期的植酥，有許多變體可用來搖晃 web 組件镀岛。
