多是最全的前端動效庫彙總

時間  2021-08-12
標籤 css html 前端 vue html5 react jquery android css3 git 欄目 CSS 简体版
原文   原文鏈接

收集日期爲2019-02-28，「★」表明當時的該項目在github的star數量css

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

  • 遊戲引擎。

如何選取合適的動畫技術

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

參考

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程