前端動畫庫懶人包

隨著各種類型網絡技術的快速發展,動畫庫能為我們的網頁設計增添很多視覺趣味。

作為前/後端的開發人員來說,熟悉及掌握好各種動畫庫(甚至抽取搭建成自己優化的動畫庫)代碼,便能輕鬆省時省力地完成各種工作需求。

即使客戶或用戶的UI設計需求越來越多,再加上設計大神們提交的動畫動效DEMO,本文推薦的這些動畫庫基本都能在瀏覽器裡面實現出來咯。希望對各位開發童鞋來說能有所幫助。

1. Animate.css

前端動畫庫懶人包

創建者:Daniel Eden
發布日期:2013年
關注人氣:在GitHub上有25000+個星贊。
簡介說明:一個簡單易用的跨瀏覽器CSS動畫庫。
文件大小::55.2 kB.
GitHub主頁:https://github.com/daneden/animate.css
版權許可: MIT

2. Bounce.js

前端動畫庫懶人包

創建者:Tictail
發布日期:2014年
關注人氣:在GitHub上有3500+個星贊。
簡介說明:即時創造漂亮的CSS3動畫。
文件大小::16 kB.
GitHub主頁:https://github.com/tictail/bounce.js
版權許可: MIT

3. Magic Animations

前端動畫庫懶人包

創建者:Christian
發布日期:2014年
關注人氣:在GitHub上有3400+個星贊。
簡介說明:可創造CSS3動畫特效。
文件大小::36.5 kB.
GitHub主頁:https://github.com/miniMAC/magic

4. DynCSS

前端動畫庫懶人包

創建者:Vittorio Zaccaria
發布日期:2014年
關注人氣:在GitHub上有190+個星贊。
簡介說明:用動態CSS來打造你的網頁。
文件大小::36.5 kB.
GitHub主頁:https://github.com/vzaccaria/DynCSS

5. CSShake

前端動畫庫懶人包

創建者:Lionel
發布日期:2014年
關注人氣:在GitHub上有2000+個星贊。
簡介說明:用CSS實現各種顛顫動畫效果DOM!
文件大小::78.8 kB.
GitHub主頁:https://github.com/elrumordelaluz/csshake
版權許可: MIT

6.Hover.css

前端動畫庫懶人包

創建者:Ian Lunn
發布日期:2014年
關注人氣:在GitHub上有10700+個星贊。
簡介說明:將鼠標Hover效果快速應用在你的網頁元素或創意設計上。
文件大小::104.2 kB.
GitHub主頁:https://github.com/IanLunn/Hover
版權許可: MIT

7. Velocity.js

前端動畫庫懶人包

創建者:Julian Shapiro
發布日期:2014年
關注人氣:在GitHub上有8700+個星贊。
簡介說明:幫你加速JavaScript動畫。
文件大小::34.8 kB.
GitHub主頁:https://github.com/julianshapiro/velocity
版權許可: MIT

8. Favico.js

前端動畫庫懶人包

創建者:Miroslav Magda
發布日期:2013年
關注人氣:在GitHub上有4900+個星贊。
簡介說明:讓你可以使用視頻、標誌或圖片來設計站點的Favicon。
文件大小::8.9 kB.
GitHub主頁:https://github.com/ejci/favico.js
版權許可: MIT

9. AniJS

前端動畫庫懶人包

創建者:anijs
發布日期:2014年
關注人氣:在GitHub上有2500+個星贊。
簡介說明:無須過多代碼照樣提升網頁設計逼格的動畫庫。
文件大小::10.5 kB.
GitHub主頁:https://github.com/anijs/anijs
版權許可: MIT

10.slideout

slideout

創建者:pazguille
發布日期:2015年
關注人氣:在GitHub上有7200+個星贊。
簡介說明:一個非常美觀的側滑選單。
文件大小::1.05 kB.
GitHub主頁:https://github.com/Mango/slideout
版權許可: MIT

11.timesheet.js

前端動畫庫懶人包

創建者:sbstjn
發布日期:2015年
關注人氣:在GitHub上有6400+個星贊。
簡介說明:基於 HTML5 & CSS3 時間表。
文件大小::1.07 KB
GitHub主頁:https://github.com/sbstjn/timesheet.js
版權許可: MIT

12.plyr

前端動畫庫懶人包

創建者:sampotts
發布日期:2017年
關注人氣:在GitHub上有10,000+個星贊。
簡介說明:美觀的 HTML5 影片播放器。
文件大小::1.05 KB
GitHub主頁:https://github.com/sampotts/plyr
版權許可: MIT

13.vivus.js

前端動畫庫懶人包

創建者:maxwellito
發布日期:2014年
關注人氣:在GitHub上有10,000+個星贊。
簡介說明:可以動態描繪 SVG 的 JS 庫, 支持多種動畫。
文件大小::1.06 KB
GitHub主頁:https://github.com/maxwellito/vivus
版權許可: MIT

14.SocialButtons

前端動畫庫懶人包

創建者:t4t5
發布日期:2014年
關注人氣:在GitHub上有79+個星贊。
簡介說明:漂亮的社交按鈕。
文件大小::1.06 KB
GitHub主頁:https://github.com/t4t5/SocialButtons
版權許可: MIT

15.slick

前端動畫庫懶人包

創建者:pra85 & kenwheeler
發布日期:2013年
關注人氣:在GitHub上有20,000+個星贊。
簡介說明:功能異常強大的一個圖片滑動切換效果庫。
文件大小::1.05 KB
GitHub主頁:https://github.com/kenwheeler/slick
版權許可: MIT

16.matter-js

screen-recording-2018-03-16-at-11-06-%e4%b8%8a%e5%8d%88

創建者:liabru
發布日期:2017年
關注人氣:在GitHub上有6,000+個星贊。
簡介說明:2D 物理效果引擎,碰撞、彈跳等。
文件大小::1.07 KB
GitHub主頁:https://github.com/liabru/matter-js?spm=5176.100239.blogcont71256.107.tjoYI2
版權許可: MIT

17.jQuery.countdown

前端動畫庫懶人包

創建者:hilios
發布日期:2014年
關注人氣:在GitHub上有1,800+個星贊。
簡介說明:jQuery 倒計時插件。
文件大小::1.05 KB
GitHub主頁:https://github.com/hilios/jQuery.countdown
版權許可: MIT

持續更新...

 


 

以下幾點請你深思一下

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化