摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫之一?？赡苁莿?chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫。

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

56401 ★

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

文件大?。?5.2 kB.

5754 ★

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

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

文件大?。?6 kB.

21084 ★

支持 CSS，DOM，SVG，和JS對(duì)象

點(diǎn)擊Documentation，查看animejs的動(dòng)效組件說明文檔；點(diǎn)擊Codepen，進(jìn)入anime的動(dòng)效庫，查看可編輯的動(dòng)效演示和示例。

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

缺少自定義特效

作為Three JS的潛在替代方案

5754 ★

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

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

文件大?。?6.5 KB.

3427 ★

通過JavaScript控制的動(dòng)效庫

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

文件大?。?0.5 kB.

3781 ★

元素顫抖效果。一個(gè)瘋狂搖動(dòng)的動(dòng)效庫，包括方向（水平、上下），類型（固定、瘋狂），強(qiáng)度（強(qiáng)、弱）等等

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

文件大?。?8.8 kB.

14692 ★

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

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

文件大小：34.8 kB.

13461 ★

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

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

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

GitHub-Issues

10365 ★

SVG動(dòng)效庫

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

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

20544 ★

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

文件大?。?04.2 kB.

5202 ★

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

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

7034 ★

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

7767 ★

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

13777 ★

一個(gè)只有 12KB 的 JavaScript 運(yùn)動(dòng)引擎，可以用來實(shí)現(xiàn)動(dòng)畫，物理效果和輸入跟蹤

一款用于UI界面的JavaScript動(dòng)畫庫，包含了四個(gè)強(qiáng)大的開源工具：pose、popmotion、stylefire和framesync

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

15499 ★

一款特定動(dòng)畫的JavaScript庫

非?？犰诺倪M(jìn)場效果。

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

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

1478 ★

SVG動(dòng)效庫

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

371 ★

“一個(gè)古怪的CSS動(dòng)畫庫?！?，里面的動(dòng)效都比較“冷淡”

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

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

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

（沒找到github倉庫）

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

6613 ★

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

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

（沒找到github倉庫）

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

15612 ★

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

輕量的粒子動(dòng)效 JS 開源庫

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

42569 ★

5767 ★

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

6531 ★

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

189 ★

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

5124 ★

一個(gè)輕量級(jí)的動(dòng)效庫，它只有2KB，但是它有著自定義 JavaScript 動(dòng)畫所需的全部基本功能。

可以通過npm安裝

7989 ★

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

13601 ★

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

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

2450 ★

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

486 ★

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

文件大小：36.5 kB

8150 ★

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

文件大?。?.9 kB.

1605 ★

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

6601 ★

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

857 ★

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

179 ★

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

1693 ★

通過自定義參數(shù)實(shí)現(xiàn)對(duì)復(fù)雜動(dòng)效的設(shè)計(jì)。

3373 ★

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

940 ★

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

1965 ★

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

6137 ★

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

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

7457 ★

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

140 ★

提供的是物體從一個(gè)點(diǎn)運(yùn)動(dòng)到另外一個(gè)點(diǎn)的動(dòng)效解決方案，包括8個(gè)特殊的效果

99 ★

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

（沒找到github倉庫）

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

227 ★

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

（沒找到github倉庫）

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

（沒找到github倉庫）

一款經(jīng)過時(shí)間考驗(yàn)的動(dòng)效工具，能夠生成經(jīng)典的動(dòng)畫效果。

508 ★

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

3302 ★

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

964 ★

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

4173 ★

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

1156 ★

一種具有沖擊力的方式來展示和隱藏某個(gè)UI對(duì)象

5246 ★

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

672 ★

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

1412 ★

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

4437 ★

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

（沒找到github倉庫）

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

2446 ★

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

436 ★

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

1927 ★

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

1277 ★

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

736 ★

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

4166 ★

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

（沒找到github倉庫）

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

377 ★

涵蓋了5種基于CSS的動(dòng)效，能夠讓特定的元素?fù)u擺，扭曲，放大，頻閃，也能讓字體字重自動(dòng)變化。

415 ★

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

96 ★

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

3482 ★

能夠?yàn)槟銕碛腥さ牡纤箍骑L(fēng)的動(dòng)效，它能夠營造出類似舞蹈的視覺效果。

7 ★

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

6802 ★

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

1464 ★

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

2174 ★

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

522 ★

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

3769 ★

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

2405 ★

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

139 ★

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

1040 ★

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

67 ★

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

139 ★

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

119 ★

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

48 ★

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

27 ★

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

4818 ★

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

231 ★

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

11797 ★

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

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

一個(gè)快速的輕量級(jí)2D動(dòng)畫渲染引擎。

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

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

文件大?。?5.2 kB.

網(wǎng)頁自動(dòng)加載進(jìn)度條插件

8760 ★

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

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

較重

游戲引擎。

游戲引擎。

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

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

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

《10個(gè)值得前端收藏的CSS3動(dòng)效庫（工具）》-2016-11-21

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

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

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

《2016年九大前端必備動(dòng)畫庫》-2016-05-05

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

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