摘要：非常的龐大，而且它是完全為設(shè)計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創(chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現(xiàn)實生活中的物理運動碰撞慣性動畫庫。

收集日期為2019-02-28，“★”代表當(dāng)時的該項目在github的star數(shù)量

56401 ★

一個跨瀏覽器的動效基礎(chǔ)庫，是許多基礎(chǔ)動效的解決方案。從經(jīng)典的彈跳動效到獨特的扭曲動效，一應(yīng)俱全。

文件大小：55.2 kB.

5754 ★

可以直接在瀏覽器中進行設(shè)計和設(shè)置的動畫庫，帶有一個完整的網(wǎng)頁構(gòu)建器，只需添加一個組件，選擇預(yù)設(shè)，然后你就可以得到CSS 代碼了

和其他的同類工具不同的地方在于，它不僅僅是一個庫，而是有這用戶可以直接操作的實際功能，它帶有一個完整的網(wǎng)頁構(gòu)建器。Bounce.js 是為數(shù)不多的可以直接在瀏覽器中進行設(shè)計和設(shè)置的動畫庫之一。

文件大小：16 kB.

21084 ★

支持 CSS，DOM，SVG，和JS對象

點擊Documentation，查看animejs的動效組件說明文檔；點擊Codepen，進入anime的動效庫，查看可編輯的動效演示和示例。

將動畫加持在LOGO、按鈕、圖像等各種各樣的元素上。它支持各種常見的觸發(fā)機制，比如點擊、懸停、滑動，你可以借助它定義一系列的動畫。

缺少自定義特效

作為Three JS的潛在替代方案

5754 ★

與Animate.css十分類似，也是一個預(yù)定義了一系列動效的CSS庫。但與Animate.css的最大區(qū)別可能是，它定義的那些動效更炫也更酷一些

許多基于CSS3的動畫效果，并且?guī)в性S多在別的地方根本找不到的自定義樣式。這是一個非常大的CSS3代碼庫合集

文件大小：36.5 KB.

3427 ★

通過JavaScript控制的動效庫

號稱“無需編碼即可提升網(wǎng)頁設(shè)計的圖書館”，通過 if、on、do、to 等簡單的命令更加直觀地處理動效還能用來控制前面 Animate.css 來創(chuàng)造動效。

文件大小：10.5 kB.

3781 ★

元素顫抖效果。一個瘋狂搖動的動效庫，包括方向（水平、上下），類型（固定、瘋狂），強度（強、弱）等等

動畫效果非常的瘋狂、獨特，它并不一定適合每個網(wǎng)站。

文件大小：78.8 kB.

14692 ★

一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協(xié)作，且不依賴 jQuery。

支持原生js，jq，react寫法，作為vue粉，失望的是，暫時沒有vue相關(guān)的插件

文件大小：34.8 kB.

13461 ★

非常的龐大，而且它是完全為UI/UX設(shè)計而生的動效庫。

Mo.JS 是模塊化的，你可以輕松移除不必要的功能，確保體量合理和流暢運行

官網(wǎng)不能訪問，作者好像不再維護了，讓找其他選擇。。--作者Tweets

GitHub-Issues

10365 ★

SVG動效庫

一個輕量級的JavaScript動效庫，跟Lazy Line Painter一樣，它也是創(chuàng)建SVG路徑動畫的，里面有各種不同的動畫可供選擇，以及創(chuàng)建自定義腳本的選項，可以以你喜歡的任何方式繪制SVG。動畫類型有延遲、同步和依次繪制三種，還有定時功能

沒有任何依賴。除了使用SVG之外，Vivus JS還可用于創(chuàng)建漂亮的按鈕，也有其他令人驚嘆的動畫可供使用。

20544 ★

鼠標(biāo)懸浮效果。提供了大量的Hover效果，包括2D變換，圖標(biāo)變換，背景變換等等。而且?guī)缀蹩梢詰?yīng)用于所有元素，包括鏈接，按鈕，logo，SVG甚至圖片等等。

文件大小：104.2 kB.

5202 ★

只有5k，所以可以被用在移動應(yīng)用中。而且它也支持鏈?zhǔn)秸Z法，你可以很方便地寫出復(fù)雜的動效組合。

DEMO:cards、Crazy sticks、Periodic table、Laser words

7034 ★

一個JS庫，能為你提供9種標(biāo)準(zhǔn)的動效，你可以制定其中的持續(xù)時間、頻率、預(yù)期尺寸和強度等數(shù)據(jù)，創(chuàng)造出符合物理效果的動效。

7767 ★

可能目前最炫酷的免費動畫庫之一了。它運行于純粹的 JavaScript 之上，是目前最強健的動畫資源庫之一。以SVG、畫布元素甚至 jQuery 對象良好地協(xié)同，諸如 EaselJS 這樣的庫也可以和 GSAP 聯(lián)動。一個強大的網(wǎng)頁動畫庫。

13777 ★

一個只有 12KB 的 JavaScript 運動引擎，可以用來實現(xiàn)動畫，物理效果和輸入跟蹤

一款用于UI界面的JavaScript動畫庫，包含了四個強大的開源工具：pose、popmotion、stylefire和framesync

一款與Anime JS類似的動畫庫，可用于創(chuàng)建精彩的瀏覽器動畫。該庫還具有指針跟蹤，彈簧物理，3D動畫等功能，并可用于創(chuàng)建功能型，反應(yīng)型的動畫。

15499 ★

一款特定動畫的JavaScript庫

非常酷炫的進場效果。

創(chuàng)建十分酷炫的滾動特效，是一個輕量級的工具（沒有任何依賴）

適用于DOM節(jié)點，多個容器，異步內(nèi)容，并且支持3D旋轉(zhuǎn)。ScrollReveal JS可能是創(chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持CSS Transform和CSS Transition特性。

1478 ★

SVG動效庫

一個用于SVG路徑動畫的JQUERY插件，可以使用它輕松創(chuàng)建SVG路徑動效。在AI中輸出SVG文檔，上傳到轉(zhuǎn)換器中，它就能幫你將它處理成為動效，生成jQuery 文檔。你還可以編輯代碼進行微調(diào)。

371 ★

“一個古怪的CSS動畫庫。”，里面的動效都比較“冷淡”

借助這個庫，你可以有效的控制頁面中元素的出現(xiàn)和消失的方式。

動畫并不是那種炫酷屌炸天的，相反它們是非常微妙的，真正從美學(xué)和用戶體驗的層面提升整個頁面的設(shè)計。

動效大多以流暢和優(yōu)雅著稱

（沒找到github倉庫）

能讓你設(shè)置更多的動效參數(shù)，比如你可以同時設(shè)置動效起始和終止?fàn)顟B(tài)的坐標(biāo)，大小，以及透明度，能做出更復(fù)雜的動效

6613 ★

更多地依賴于CSS，包含了一系列有滾動事件觸發(fā)的漂亮的預(yù)定義動效。

開發(fā)人員可以在向下滾動時為頁面元素添加動畫，然后在向上滾動時恢復(fù)之前的動畫狀態(tài)。這個庫還附帶了許多可由滾動事件觸發(fā)的預(yù)定義事件。

（沒找到github倉庫）

一個非常簡單易用的動效工具，你可以在它提供的簡單圖形界面里，通過拖拽一些進度條來控制你的動效，生成的CSS代碼會自動顯示在下面的一個文本框里，你可以拷貝粘貼到你的應(yīng)用中直接使用

15612 ★

一款特定動畫的JavaScript庫，用于創(chuàng)建點和線組成的精彩動畫

輕量的粒子動效 JS 開源庫

允許開發(fā)人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。但是，由于它僅適用于粒子背景，因此不適合用來創(chuàng)建其他類型的動畫。

42569 ★

5767 ★

一組非常漂亮的可用于加載中狀態(tài)的CSS3動效

6531 ★

用來給數(shù)字作動效的，比如通過它你可以很好地呈現(xiàn)網(wǎng)站人數(shù)的增加，倒計時等與數(shù)字相關(guān)的動畫效果。

189 ★

主要是基于CSS代碼的，讓對象進行旋轉(zhuǎn)、翻轉(zhuǎn)、劃入等不同類型的動畫效果。

5124 ★

一個輕量級的動效庫，它只有2KB，但是它有著自定義 JavaScript 動畫所需的全部基本功能。

可以通過npm安裝

7989 ★

吊炸天了，接近現(xiàn)實生活中的物理運動、碰撞、慣性動畫庫。

13601 ★

這個效果也很常見，類似于視覺差效果。

官網(wǎng)看起來很不錯

2450 ★

一個屬性，兩個值，創(chuàng)造無限可能

486 ★

用動態(tài)CSS來打造你的網(wǎng)頁

文件大小：36.5 kB

8150 ★

可以使用視頻、標(biāo)志或圖片來設(shè)計站點的Favicon

文件大小：8.9 kB.

1605 ★

一個純粹的動效引擎，擁有出色的性能。它可以兼容許多不同的瀏覽器，包括一些相對傳統(tǒng)的瀏覽器。

6601 ★

為你提供一個更加直觀的編輯SVG動效的環(huán)境。它足夠小巧，語法也簡單，并且提供統(tǒng)一的API。

857 ★

借助SASS 來創(chuàng)建有趣的CSS動效。其中包含了一整套預(yù)定義的特效，可以運用到不同的HTML組件當(dāng)中去。除了IE9，其他瀏覽器都可用。

179 ★

更加輕松自如的方式來創(chuàng)造延時和等待的動效。通過調(diào)整控制面板上的參數(shù)，你可以創(chuàng)造出更加自然的效果。

1693 ★

通過自定義參數(shù)實現(xiàn)對復(fù)雜動效的設(shè)計。

3373 ★

是一個CSS驅(qū)動下的動效框架，用來構(gòu)建基于步驟的響應(yīng)式的動效。

940 ★

一款性能優(yōu)異，速度夠快且足夠靈活的補間動畫引擎，它是公認的 GreenSock 替代方案

1965 ★

一個用來做高級圖形處理的JS庫，它有著非常簡單易用的API和SVG渲染器。

6137 ★

目前最強大的動效補間引擎，其中的參數(shù)控制系統(tǒng)足夠完善，讓你擁有絕佳的動效解決方案。

張鑫旭也有自己實現(xiàn)了緩動函數(shù)--tween.js

7457 ★

功能其實并不多，但是它涵蓋了完善的2D轉(zhuǎn)3D的動效的功能。

140 ★

提供的是物體從一個點運動到另外一個點的動效解決方案，包括8個特殊的效果

99 ★

一款輕量級的動效處理工具，它還支持額外的插件來實現(xiàn)倒計時、旋轉(zhuǎn)等不同樣式的動效

（沒找到github倉庫）

一個用來構(gòu)建自適應(yīng)元素動效的框架

227 ★

如果你喜歡 mixin 來輕松控制動效，那么Saffron 肯定會讓你愛不釋手。它是使用Sass來編寫，可以更方便地設(shè)置參數(shù)和變量

（沒找到github倉庫）

一個輕量級的固定動效編輯器，讓你可以更輕松地設(shè)置同步或者延遲效果，然后可以下載相應(yīng)的CSS或者SCSS代碼。

（沒找到github倉庫）

一款經(jīng)過時間考驗的動效工具，能夠生成經(jīng)典的動畫效果。

508 ★

超過40種預(yù)定義的動效，并且你可以根據(jù)自己的需要在它們基礎(chǔ)上進行自定義

3302 ★

專門用來3D 渲染的工具，即使你是新手也能夠輕松掌握3D CSS樣式。

964 ★

使用FLIP 技術(shù)讓動畫更加平滑

4173 ★

一個非常實用的庫，用來創(chuàng)造漂亮的顧慮、排序、插入等界面的動態(tài)效果

1156 ★

一種具有沖擊力的方式來展示和隱藏某個UI對象

5246 ★

制作從一個元素變化為另外一個元素的動效，它能作用于DOM元素、SVG、靜態(tài)和動態(tài)的圖片。

672 ★

基于jQuery 引擎，能夠有效地繪制出SVG內(nèi)的所有路徑，制作出戲劇性的動效。

1412 ★

它集成了物理運動規(guī)則，引入了CSS轉(zhuǎn)換、3D轉(zhuǎn)換和JS來實現(xiàn)功能。它的主要特色在于幫你減少一次生成多個不同對象所耗費的時間精力。

4437 ★

一個簡單的工具，幫你創(chuàng)建縮放、傾斜、移動等常規(guī)的動效。

（沒找到github倉庫）

一組精心組合搭配的動態(tài)元素合集，旨在強化界面中的交互，有8個強大的組件幫你理清基本的任務(wù)。

2446 ★

一個引人矚目的3D 動效庫，它能以變成的方式來構(gòu)建CSS3動畫。它可以和jQuery 一起使用，輸出你所需要的效果。

436 ★

內(nèi)置的4個選項卡分辨用來控制關(guān)鍵幀、緩動、導(dǎo)出、HTML

1927 ★

能夠讓你的轉(zhuǎn)場動效更加富有生命力，產(chǎn)生更加愉悅的效果。它可以同F(xiàn)ont Awesome 聯(lián)動，還能同 Glyphicons 甚至你的自制圖標(biāo)搭配起來使用。

1277 ★

一款運用于Sketch 的小型動效生成和導(dǎo)出工具，它并不花哨，能夠幫你掌控關(guān)鍵幀、添加緩動功能，控制序列，等等。

736 ★

一款同JS協(xié)同的優(yōu)秀框架，集合了場景、渲染技術(shù)、剪輯蒙板和標(biāo)準(zhǔn)行為包等組件。

4166 ★

一款小型的JS庫，通過生成漸變的動效來幫你創(chuàng)造有趣的視覺效果。

（沒找到github倉庫）

一系列常規(guī)與非常規(guī)的預(yù)定義的CSS動效，你可以在其中測試各種動效的效果，并且根據(jù)需求調(diào)整其中的參數(shù)。

377 ★

涵蓋了5種基于CSS的動效，能夠讓特定的元素搖擺，扭曲，放大，頻閃，也能讓字體字重自動變化。

415 ★

包含了從強大的 Animate.css 借來的大量的醒目的動態(tài)效果，而實現(xiàn)方式則比后者更加便捷。

96 ★

一組包含15款漂亮的動效的合集，這些動效主要用來改善用戶和表單交互的體驗。每種動效的效果各不相同，有的能夠增加邊框亮度，有的能夠強化視覺線索，等等。

3482 ★

能夠為你帶來有趣的迪斯科風(fēng)的動效，它能夠營造出類似舞蹈的視覺效果。

7 ★

Colorido.js 和 Granim.js 非常相似，這款基于JS的插件被創(chuàng)造出來操控色彩相關(guān)的素材的。它能夠動態(tài)地控制色調(diào)和不透明度的，不論是背景、文本、線條還是段落都在它的控制范疇以內(nèi)。

6802 ★

利用PJAX（基于Ajax 技術(shù)）來減輕用戶在動效刷新時候的錯位感，讓容器在悄無聲息之間切換。

1464 ★

更簡單，也更容易控制。支持CSS3， 但是同樣也允許使用 JavaScript API 來添加動效。

2174 ★

用來構(gòu)建橫向滾動的網(wǎng)站頁面的。它允許使用相當(dāng)簡單的語法在X軸上構(gòu)建漂亮的CSS3動畫效果。

522 ★

沒有其他動效工具中繁復(fù)多樣的選項，它只包含一些基本的、實用的動效設(shè)置選項，幫你創(chuàng)造微妙的動效。

3769 ★

為了漂亮的視差滾動而生的，它是一個輕量級的 Vanilla JavaScript 庫，可以幫你的界面添加有趣的3D效果。

2405 ★

能夠產(chǎn)生令人著迷的傾斜視差效果，相當(dāng)于是在2D的界面中模擬出3D的傾斜效果。

139 ★

如果你想通過網(wǎng)頁來講述故事，Transform-when 是一個非常不錯的解決方案，它主要幫你控制時間和滾動位置兩個因素，幫你精確控制用戶瀏覽故事過程中的每一個動效的體驗。

1040 ★

賦予線條以生命，讓它們像波浪一樣旋轉(zhuǎn)，“跳舞”。

67 ★

一款靈活、高效、輕量級的動效控制工具，能夠管理關(guān)鍵幀和各種不同CSS動效的效果，最關(guān)鍵的是它是完全免費的。

139 ★

一款 SASS mixin，可以控制關(guān)鍵字，也能設(shè)置動態(tài)SVG和任何HTML 元素

119 ★

是和 Greensock 聯(lián)動的動效設(shè)計工具，可以創(chuàng)建出隨著用戶滾動時隨之運動的動態(tài)對象。

48 ★

一個非常簡單的動效插件，能在生成移動的云朵，用來填充頁面。當(dāng)然，你也可以將云替換成其他的東西。

27 ★

這個動效是用來生成動態(tài)色彩改變的工具，作用的對象可以是背景圖片、邊框、文本等元素，實際上只要是帶有色彩屬性的元素，它都能控制。

4818 ★

如果你想讓一個對象轉(zhuǎn)變?yōu)榱硗庖粋€對象的過程更加順滑，那么你一定不要錯過 Flubber 這個工具。不過它的缺陷在于，只能作用于2D的元素。

231 ★

相比于上面功能完備的粒子動效工具，這只是一個小腳本，幫你的背景添加漂亮的粒子特效而已。可控的參數(shù)包括色彩、線條和不透明度。

11797 ★

適用于現(xiàn)代網(wǎng)絡(luò)的JavaScript SVG庫。

張鑫旭關(guān)于snap.svg的demo教程

一個快速的輕量級2D動畫渲染引擎。

主要使用webgl技術(shù)，能幫助展示、驅(qū)動和管理富有交互性的圖形、制作游戲。

使用Javascript以及其他HTML5技術(shù)，結(jié)合PixiJS引擎，可以創(chuàng)建出豐富的交互式圖形，跨平臺的應(yīng)用程序和游戲。

文件大小：55.2 kB.

網(wǎng)頁自動加載進度條插件

8760 ★

一款幫助你實現(xiàn)滾動頁面時觸發(fā) CSS 動畫效果的插件

游戲引擎，一整套游戲開發(fā)的“游戲解決方案”。

較重

游戲引擎。

游戲引擎。

動效庫太多，不知道用什么方案去實現(xiàn)前端動畫更合適，可以參考這一篇文章《如何選取合適的前端動效方案？》

《2018年值得關(guān)注的10大JavaScript動畫庫》-2018-08-01

《讓你的網(wǎng)頁動起來！必須讓前端知道的10個網(wǎng)頁動效庫》-2018-06-20

《10個值得前端收藏的CSS3動效庫（工具）》-2016-11-21

《前端福利！10個免費好用功能強大的網(wǎng)頁動畫效果庫》-2018-01-24

《推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,》-2017-04-30

《WEB前端動畫庫匯總篇（應(yīng)有盡有）》-2017-11-10

《2016年九大前端必備動畫庫》-2016-05-05

《要做動效？這75款動效工具讓你無所不能（上）》-2017-08-08

《要做動效？這75款動效工具讓你無所不能（下）》-2017-08-09