2016-9-front-end-animation-1

@UC優視RED設計中心?:進入2016年,隨著各種類型網絡技術的快速發展,動畫庫能為我們的網頁設計增添很多視覺趣味。作為前/后端的開發人員來說,熟悉及掌握好各種動畫庫(甚至抽取搭建成自己優化的動畫庫)代碼,便能輕松省時省力地完成各種工作需求。即使客戶或用戶的UI設計需求越來越多,再加上設計大神們提交的動畫動效DEMO,本文推薦的這些動畫庫基本都能在瀏覽器里面實現出來咯。希望對各位開發童鞋來說能有所幫助。

2016開年大禮包系列:

  1. 《2016開年大禮包!100套最新UI PSD素材打包下載》
  2. 《年終干貨盛典!優設2015年最受歡迎的設計資源大盤點》

1. Animate.css

1450061535UvuEem9-new

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

2. Bounce.js

1450061550R1sLaTh-new

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

3. Magic Animations

1450061529zEm5C3Y-new

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

4. DynCSS

1450061540SzazG3O-new

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

5. CSShake

1450061544Rpuh5k4-new

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

6.Hover.css

1450061560HdMHuQA-new

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

7. Velocity.js

1450061570gvl0BB5-new

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

8. Favico.js

1450061565GxBx8Uf-new

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

9. AniJS

anijs

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

【從海報設計中學習平面經典法則!】

  1. 《設計易容術!如何設計一張高品位高水準的海報?》
  2. 《設計易容術!如何設計一張高品位高水準的海報(二)》
  3. 《設計易容術!如何設計一張高品位高水準的海報?(三)》

uisdc-ad-wechat

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量108萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 3

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏