可能是最全的前端動效庫彙總

宮秋發表於2019-04-24
前端

收集日期為2019-02-28，“★”代表當時的該專案在github的star數量

Animate.css

  • 56401 ★
  • 一個跨瀏覽器的動效基礎庫，是許多基礎動效的解決方案。從經典的彈跳動效到獨特的扭曲動效，一應俱全。
  • 檔案大小：55.2 kB.
  • 可能是最全的前端動效庫彙總

Bounce.js

  • 5754 ★
  • 可以直接在瀏覽器中進行設計和設定的動畫庫，帶有一個完整的網頁構建器，只需新增一個元件，選擇預設，然後你就可以得到CSS 程式碼了
  • 和其他的同類工具不同的地方在於，它不僅僅是一個庫，而是有這使用者可以直接操作的實際功能，它帶有一個完整的網頁構建器。Bounce.js 是為數不多的可以直接在瀏覽器中進行設計和設定的動畫庫之一。
  • 檔案大小：16 kB.
  • 可能是最全的前端動效庫彙總

Anime.js

  • 21084 ★
  • 支援 CSS，DOM，SVG，和JS物件
  • 點選Documentation，檢視animejs的動效元件說明文件；點選Codepen，進入anime的動效庫，檢視可編輯的動效演示和示例。
  • 將動畫加持在LOGO、按鈕、影像等各種各樣的元素上。它支援各種常見的觸發機制，比如點選、懸停、滑動，你可以藉助它定義一系列的動畫。
  • 缺少自定義特效
  • 作為Three JS的潛在替代方案
  • 可能是最全的前端動效庫彙總

Magic Animations

  • 5754 ★
  • 與Animate.css十分類似，也是一個預定義了一系列動效的CSS庫。但與Animate.css的最大區別可能是，它定義的那些動效更炫也更酷一些
  • 許多基於CSS3的動畫效果，並且帶有許多在別的地方根本找不到的自定義樣式。這是一個非常大的CSS3程式碼庫合集
  • 檔案大小：36.5 KB.
  • 可能是最全的前端動效庫彙總

AniJS

  • 3427 ★
  • 通過JavaScript控制的動效庫
  • 號稱“無需編碼即可提升網頁設計的圖書館”，通過 if、on、do、to 等簡單的命令更加直觀地處理動效還能用來控制前面 Animate.css 來創造動效。
  • 檔案大小：10.5 kB.
  • 可能是最全的前端動效庫彙總

CSShake

  • 3781 ★
  • 元素顫抖效果。一個瘋狂搖動的動效庫，包括方向（水平、上下），型別（固定、瘋狂），強度（強、弱）等等
  • 動畫效果非常的瘋狂、獨特，它並不一定適合每個網站。
  • 檔案大小：78.8 kB.
  • 可能是最全的前端動效庫彙總

Velocity.js

  • 14692 ★
  • 一個簡單易用、高效能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協作，且不依賴 jQuery。
  • 支援原生js，jq，react寫法，作為vue粉，失望的是，暫時沒有vue相關的外掛
  • 檔案大小：34.8 kB.
  • 可能是最全的前端動效庫彙總

Mo.js（官網目前訪問不了。。）

  • 13461 ★
  • 非常的龐大，而且它是完全為UI/UX設計而生的動效庫。
  • Mo.JS 是模組化的，你可以輕鬆移除不必要的功能，確保體量合理和流暢執行
  • 官網不能訪問，作者好像不再維護了，讓找其他選擇。。--作者Tweets
  • 可能是最全的前端動效庫彙總

Vivus.js

  • 10365 ★
  • SVG動效庫
  • 一個輕量級的JavaScript動效庫，跟Lazy Line Painter一樣，它也是建立SVG路徑動畫的，裡面有各種不同的動畫可供選擇，以及建立自定義指令碼的選項，可以以你喜歡的任何方式繪製SVG。動畫型別有延遲、同步和依次繪製三種，還有定時功能
  • 沒有任何依賴。除了使用SVG之外，Vivus JS還可用於建立漂亮的按鈕，也有其他令人驚歎的動畫可供使用。
  • 可能是最全的前端動效庫彙總

Hover.css

  • 20544 ★
  • 滑鼠懸浮效果。提供了大量的Hover效果，包括2D變換，圖示變換，背景變換等等。而且幾乎可以應用於所有元素，包括連結，按鈕，logo，SVG甚至圖片等等。
  • 檔案大小：104.2 kB.
  • 可能是最全的前端動效庫彙總

Snabbt.js

Dynamics.js

  • 7034 ★
  • 一個JS庫，能為你提供9種標準的動效，你可以制定其中的持續時間、頻率、預期尺寸和強度等資料，創造出符合物理效果的動效。
  • 可能是最全的前端動效庫彙總

GSAP(GreenSock JS)

  • 7767 ★
  • 可能目前最炫酷的免費動畫庫之一了。它執行於純粹的 JavaScript 之上，是目前最強健的動畫資源庫之一。以SVG、畫布元素甚至 jQuery 物件良好地協同，諸如 EaselJS 這樣的庫也可以和 GSAP 聯動。一個強大的網頁動畫庫。
  • 可能是最全的前端動效庫彙總

Popmotion

  • 13777 ★
  • 一個只有 12KB 的 JavaScript 運動引擎，可以用來實現動畫，物理效果和輸入跟蹤
  • 一款用於UI介面的JavaScript動畫庫，包含了四個強大的開源工具：pose、popmotion、stylefire和framesync
  • 一款與Anime JS類似的動畫庫，可用於建立精彩的瀏覽器動畫。該庫還具有指標跟蹤，彈簧物理，3D動畫等功能，並可用於建立功能型，反應型的動畫。
  • 可能是最全的前端動效庫彙總

scrollreveal.js

  • 15499 ★
  • 一款特定動畫的JavaScript庫
  • 非常酷炫的進場效果。
  • 建立十分酷炫的滾動特效，是一個輕量級的工具（沒有任何依賴）
  • 適用於DOM節點，多個容器，非同步內容，並且支援3D旋轉。ScrollReveal JS可能是建立滾動特效最好用的工具，它支援大量的瀏覽器，只要它們支援CSS Transform和CSS Transition特性。
  • 可能是最全的前端動效庫彙總

Lazy Line Painter

  • 1478 ★
  • SVG動效庫
  • 一個用於SVG路徑動畫的JQUERY外掛，可以使用它輕鬆建立SVG路徑動效。在AI中輸出SVG文件，上傳到轉換器中，它就能幫你將它處理成為動效，生成jQuery 文件。你還可以編輯程式碼進行微調。
  • 可能是最全的前端動效庫彙總

It's Tuesday.

  • 371 ★
  • “一個古怪的CSS動畫庫。”，裡面的動效都比較“冷淡”
  • 藉助這個庫，你可以有效的控制頁面中元素的出現和消失的方式。
  • 動畫並不是那種炫酷屌炸天的，相反它們是非常微妙的，真正從美學和使用者體驗的層面提升整個頁面的設計。
  • 動效大多以流暢和優雅著稱
  • 可能是最全的前端動效庫彙總

CSS Animate

  • （沒找到github倉庫）
  • 能讓你設定更多的動效引數，比如你可以同時設定動效起始和終止狀態的座標，大小，以及透明度，能做出更復雜的動效
  • 可能是最全的前端動效庫彙總

AOS

  • 6613 ★
  • 更多地依賴於CSS，包含了一系列有滾動事件觸發的漂亮的預定義動效。
  • 開發人員可以在向下滾動時為頁面元素新增動畫，然後在向上滾動時恢復之前的動畫狀態。這個庫還附帶了許多可由滾動事件觸發的預定義事件。
  • 可能是最全的前端動效庫彙總

CSS3 Animation

  • （沒找到github倉庫）
  • 一個非常簡單易用的動效工具，你可以在它提供的簡單圖形介面裡，通過拖拽一些進度條來控制你的動效，生成的CSS程式碼會自動顯示在下面的一個文字框裡，你可以拷貝貼上到你的應用中直接使用
  • 可能是最全的前端動效庫彙總

Particles JS

  • 15612 ★
  • 一款特定動畫的JavaScript庫，用於建立點和線組成的精彩動畫
  • 輕量的粒子動效 JS 開源庫
  • 允許開發人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。但是，由於它僅適用於粒子背景，因此不適合用來建立其他型別的動畫。
  • 可能是最全的前端動效庫彙總

Three JS

  • 42569 ★

Single Element CSS Spinners

  • 5767 ★
  • 一組非常漂亮的可用於載入中狀態的CSS3動效
  • 可能是最全的前端動效庫彙總

Odometer

  • 6531 ★
  • 用來給數字作動效的，比如通過它你可以很好地呈現網站人數的增加，倒數計時等與數字相關的動畫效果。
  • 可能是最全的前端動效庫彙總

Wicked CSS

  • 189 ★
  • 主要是基於CSS程式碼的，讓物件進行旋轉、翻轉、劃入等不同型別的動畫效果。
  • 可能是最全的前端動效庫彙總

Animate Plus

  • 5124 ★
  • 一個輕量級的動效庫，它只有2KB，但是它有著自定義 JavaScript 動畫所需的全部基本功能。
  • 可以通過npm安裝

matter.js

  • 7989 ★
  • 吊炸天了，接近現實生活中的物理運動、碰撞、慣性動畫庫。
  • 可能是最全的前端動效庫彙總

parallax.js

  • 13601 ★
  • 這個效果也很常見，類似於視覺差效果。
  • 官網看起來很不錯
  • 可能是最全的前端動效庫彙總

animatable

  • 2450 ★
  • 一個屬性，兩個值，創造無限可能
  • 可能是最全的前端動效庫彙總

DynCSS

  • 486 ★
  • 用動態CSS來打造你的網頁
  • 檔案大小：36.5 kB
  • 可能是最全的前端動效庫彙總

Favico.js

  • 8150 ★
  • 可以使用視訊、標誌或圖片來設計站點的Favicon
  • 檔案大小：8.9 kB.
  • 可能是最全的前端動效庫彙總

Kute.js

  • 1605 ★
  • 一個純粹的動效引擎，擁有出色的效能。它可以相容許多不同的瀏覽器，包括一些相對傳統的瀏覽器。
  • 可能是最全的前端動效庫彙總

SVG.js

  • 6601 ★
  • 為你提供一個更加直觀的編輯SVG動效的環境。它足夠小巧，語法也簡單，並且提供統一的API。
  • 可能是最全的前端動效庫彙總

Motion UI

  • 857 ★
  • 藉助SASS 來建立有趣的CSS動效。其中包含了一整套預定義的特效，可以運用到不同的HTML元件當中去。除了IE9，其他瀏覽器都可用。
  • 可能是最全的前端動效庫彙總

WAIT! ANIMATE

  • 179 ★
  • 更加輕鬆自如的方式來創造延時和等待的動效。通過調整控制皮膚上的引數，你可以創造出更加自然的效果。
  • 可能是最全的前端動效庫彙總

choreographer.js

  • 1693 ★
  • 通過自定義引數實現對複雜動效的設計。
  • 可能是最全的前端動效庫彙總

sequence.js（最後維護時間4年前）

  • 3373 ★
  • 是一個CSS驅動下的動效框架，用來構建基於步驟的響應式的動效。

shifty（官網感覺已經不維護）

  • 940 ★
  • 一款效能優異，速度夠快且足夠靈活的補間動畫引擎，它是公認的 GreenSock 替代方案

bonsai.js

  • 1965 ★
  • 一個用來做高階圖形處理的JS庫，它有著非常簡單易用的API和SVG渲染器。
  • 可能是最全的前端動效庫彙總

tween.js

transit

  • 7457 ★
  • 功能其實並不多，但是它涵蓋了完善的2D轉3D的動效的功能。
  • 可能是最全的前端動效庫彙總

rocket

  • 140 ★
  • 提供的是物體從一個點運動到另外一個點的動效解決方案，包括8個特殊的效果
  • 可能是最全的前端動效庫彙總

animo.js

  • 99 ★
  • 一款輕量級的動效處理工具，它還支援額外的外掛來實現倒數計時、旋轉等不同樣式的動效

shift.css

  • （沒找到github倉庫）
  • 一個用來構建自適應元素動效的框架

saffron

  • 227 ★
  • 如果你喜歡 mixin 來輕鬆控制動效，那麼Saffron 肯定會讓你愛不釋手。它是使用Sass來編寫，可以更方便地設定引數和變數
  • 可能是最全的前端動效庫彙總

cssynth

  • （沒找到github倉庫）
  • 一個輕量級的固定動效編輯器，讓你可以更輕鬆地設定同步或者延遲效果，然後可以下載相應的CSS或者SCSS程式碼。

ceaser

  • （沒找到github倉庫）
  • 一款經過時間考驗的動效工具，能夠生成經典的動畫效果。

morf.js

  • 508 ★
  • 超過40種預定義的動效，並且你可以根據自己的需要在它們基礎上進行自定義
  • 可能是最全的前端動效庫彙總

voxel.css

  • 3302 ★
  • 專門用來3D 渲染的工具，即使你是新手也能夠輕鬆掌握3D CSS樣式。
  • 可能是最全的前端動效庫彙總

repaintless.css

  • 964 ★
  • 使用FLIP 技術讓動畫更加平滑
  • 可能是最全的前端動效庫彙總

mixitup

  • 4173 ★
  • 一個非常實用的庫，用來創造漂亮的顧慮、排序、插入等介面的動態效果
  • 可能是最全的前端動效庫彙總

wallop

  • 1156 ★
  • 一種具有衝擊力的方式來展示和隱藏某個UI物件
  • 可能是最全的前端動效庫彙總

ramjet

  • 5246 ★
  • 製作從一個元素變化為另外一個元素的動效，它能作用於DOM元素、SVG、靜態和動態的圖片。
  • 可能是最全的前端動效庫彙總

jquery drawsvg

  • 672 ★
  • 基於jQuery 引擎，能夠有效地繪製出SVG內的所有路徑，製作出戲劇性的動效。
  • 可能是最全的前端動效庫彙總

animatic.js

  • 1412 ★
  • 它整合了物理運動規則，引入了CSS轉換、3D轉換和JS來實現功能。它的主要特色在於幫你減少一次生成多個不同物件所耗費的時間精力。

Move.js

  • 4437 ★
  • 一個簡單的工具，幫你建立縮放、傾斜、移動等常規的動效。
  • 可能是最全的前端動效庫彙總

eg.js

  • （沒找到github倉庫）
  • 一組精心組合搭配的動態元素合集，旨在強化介面中的互動，有8個強大的元件幫你理清基本的任務。

GFX

  • 2446 ★
  • 一個引人矚目的3D 動效庫，它能以變成的方式來構建CSS3動畫。它可以和jQuery 一起使用，輸出你所需要的效果。
  • 可能是最全的前端動效庫彙總

stylie

  • 436 ★
  • 內建的4個選項卡分辨用來控制關鍵幀、緩動、匯出、HTML
  • 可能是最全的前端動效庫彙總

iconate.js

  • 1927 ★
  • 能夠讓你的轉場動效更加富有生命力，產生更加愉悅的效果。它可以同Font Awesome 聯動，還能同 Glyphicons 甚至你的自制圖示搭配起來使用。
  • 可能是最全的前端動效庫彙總

animatemate

  • 1277 ★
  • 一款運用於Sketch 的小型動效生成和匯出工具，它並不花哨，能夠幫你掌控關鍵幀、新增緩動功能，控制序列，等等。
  • 可能是最全的前端動效庫彙總

CAAT（Canvas Advanced Animation Toolkit）（比較陳舊了）

  • 736 ★
  • 一款同JS協同的優秀框架，集合了場景、渲染技術、剪輯蒙板和標準行為包等元件。

Granim.js

  • 4166 ★
  • 一款小型的JS庫，通過生成漸變的動效來幫你創造有趣的視覺效果。
  • 可能是最全的前端動效庫彙總

animista

  • （沒找到github倉庫）
  • 一系列常規與非常規的預定義的CSS動效，你可以在其中測試各種動效的效果，並且根據需求調整其中的引數。

obnoxious.css

  • 377 ★
  • 涵蓋了5種基於CSS的動效，能夠讓特定的元素搖擺，扭曲，放大，頻閃，也能讓字型字重自動變化。
  • 可能是最全的前端動效庫彙總

animatelo

  • 415 ★
  • 包含了從強大的 Animate.css 借來的大量的醒目的動態效果，而實現方式則比後者更加便捷。
  • 可能是最全的前端動效庫彙總

foxholder

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

rhythm.js

  • 3482 ★
  • 能夠為你帶來有趣的迪斯科風的動效，它能夠營造出類似舞蹈的視覺效果。
  • 可能是最全的前端動效庫彙總

colorido.js

  • 7 ★
  • Colorido.js 和 Granim.js 非常相似，這款基於JS的外掛被創造出來操控色彩相關的素材的。它能夠動態地控制色調和不透明度的，不論是背景、文字、線條還是段落都在它的控制範疇以內。

barba.js

  • 6802 ★
  • 利用PJAX（基於Ajax 技術）來減輕使用者在動效重新整理時候的錯位感，讓容器在悄無聲息之間切換。
  • 可能是最全的前端動效庫彙總

scrollanim

  • 1464 ★
  • 更簡單，也更容易控制。支援CSS3， 但是同樣也允許使用 JavaScript API 來新增動效。

scrolltrigger

  • 2174 ★
  • 用來構建橫向滾動的網站頁面的。它允許使用相當簡單的語法在X軸上構建漂亮的CSS3動畫效果。
  • 可能是最全的前端動效庫彙總

force.js

  • 522 ★
  • 沒有其他動效工具中繁複多樣的選項，它只包含一些基本的、實用的動效設定選項，幫你創造微妙的動效。

rellax

  • 3769 ★
  • 為了漂亮的視差滾動而生的，它是一個輕量級的 Vanilla JavaScript 庫，可以幫你的介面新增有趣的3D效果。
  • 可能是最全的前端動效庫彙總

tilt.js

  • 2405 ★
  • 能夠產生令人著迷的傾斜視差效果，相當於是在2D的介面中模擬出3D的傾斜效果。
  • 可能是最全的前端動效庫彙總

transform-when

  • 139 ★
  • 如果你想通過網頁來講述故事，Transform-when 是一個非常不錯的解決方案，它主要幫你控制時間和滾動位置兩個因素，幫你精確控制使用者瀏覽故事過程中的每一個動效的體驗。
  • 可能是最全的前端動效庫彙總

curve.js

  • 1040 ★
  • 賦予線條以生命，讓它們像波浪一樣旋轉，“跳舞”。
  • 可能是最全的前端動效庫彙總

animator.js

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

cel-animation

  • 139 ★
  • 一款 SASS mixin，可以控制關鍵字，也能設定動態SVG和任何HTML 元素

scrollissimo

  • 119 ★
  • 是和 Greensock 聯動的動效設計工具，可以建立出隨著使用者滾動時隨之運動的動態物件。

jqclouds

  • 48 ★
  • 一個非常簡單的動效外掛，能在生成移動的雲朵，用來填充頁面。當然，你也可以將雲替換成其他的東西。

color animation

  • 27 ★
  • 這個動效是用來生成動態色彩改變的工具，作用的物件可以是背景圖片、邊框、文字等元素，實際上只要是帶有色彩屬性的元素，它都能控制。

flubber

  • 4818 ★
  • 如果你想讓一個物件轉變為另外一個物件的過程更加順滑，那麼你一定不要錯過 Flubber 這個工具。不過它的缺陷在於，只能作用於2D的元素。
  • 可能是最全的前端動效庫彙總

3D LINES ANIMATION WITH THREE.JS

  • 231 ★
  • 相比於上面功能完備的粒子動效工具，這只是一個小指令碼，幫你的背景新增漂亮的粒子特效而已。可控的引數包括色彩、線條和不透明度。
  • 可能是最全的前端動效庫彙總

Snap.svg

Pixi.js

  • 一個快速的輕量級2D動畫渲染引擎。
  • 主要使用webgl技術，能幫助展示、驅動和管理富有互動性的圖形、製作遊戲。
  • 使用Javascript以及其他HTML5技術，結合PixiJS引擎，可以建立出豐富的互動式圖形，跨平臺的應用程式和遊戲。
  • 檔案大小：55.2 kB.
  • 可能是最全的前端動效庫彙總

PACE.js

  • 網頁自動載入進度條外掛
  • 可能是最全的前端動效庫彙總

WOW.js

  • 8760 ★
  • 一款幫助你實現滾動頁面時觸發 CSS 動畫效果的外掛
  • 可能是最全的前端動效庫彙總

Egret

  • 遊戲引擎，一整套遊戲開發的“遊戲解決方案”。
  • 較重

Unity

  • 遊戲引擎。

Cocos

  • 遊戲引擎。

如何選取合適的動畫技術

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

參考

相關文章