2016九大前端必備動畫庫
進入2016年，隨著各種類型網絡技術的快速發展，動畫庫能為我們的網頁設計增添很多視覺趣味。作為前/后端的開發人員來說，熟悉及掌握好各種動畫庫（甚至抽取搭建成自己優化的動畫庫）代碼，便能輕松省時省力地完成各種工作需求。即使客戶或用戶的UI設計需求越來越多，再加上設計大神們提交的動畫動效DEMO，本文推薦的這些動畫庫基本都能在瀏覽器里面實現出來咯。希望對各位開發童鞋來說能有所幫助。
1. Animate.css
</h2>
<h2>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/eb174659597a330829e1243d08fc6e9d.jpg" width="605" height="382" />
</h2>
<div>
<p>
創建者：Daniel Eden
</p>
<p>
發布日期：2013年
</p>
<p>
最新版本：3.4.0
</p>
<p>
關注人氣： 在GitHub上有25000+個星贊。
</p>
<p>
簡介說明：一個簡單易用的跨瀏覽器CSS動畫庫。
</p>
<p>
文件大小:：55.2 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958194044253589366" target="_blank">https://github.com/daneden/animate.css</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202546_519.png" />
</p>
<h2>
2.Bounce.js
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/d7524ef558a0fd3aedf9a6d05acabf43.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Tictail
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：0.8.2
</p>
<p>
關注人氣： 在GitHub上有3500+個星贊。
</p>
<p>
簡介說明：即時創造漂亮的CSS3動畫。
</p>
<p>
文件大小:：16 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958875405115066229" target="_blank">https://github.com/tictail/bounce.js</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<h2>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202546_669.png" />
</h2>
<h2>
3.Magic Animations
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/1df90b15b6ced8321f317685ffe1de7f.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Christian
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：1.1.0
</p>
<p>
關注人氣： 在GitHub上有3400+個星贊。
</p>
<p>
簡介說明：可創造CSS3動畫特效。
</p>
<p>
文件大小:：36.5 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958542312824290297" target="_blank">https://github.com/miniMAC/magic</a>
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_572.png" />
</p>
<h2>
4.DynCSS
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/d012acc848ce095dca6b7bb813dab6bf.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Vittorio Zaccaria
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：0.8.1
</p>
<p>
關注人氣： 在GitHub上有190+個星贊。
</p>
<p>
簡介說明：用動態CSS來打造你的網頁。
</p>
<p>
文件大小:：36.5 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958974829920159680" target="_blank">https://github.com/vzaccaria/DynCSS</a>
</p>
</div>
<h2>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_847.png" />
</h2>
<h2>
5.CSShake
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/f67c1350a07f8a6a2a6005d6d132b154.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Lionel
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：1.5.0
</p>
<p>
關注人氣： 在GitHub上有2000+個星贊。
</p>
<p>
簡介說明：用CSS實現各種顛顫動畫效果DOM！
</p>
<p>
文件大小:：78.8 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958974830142430920" target="_blank">https://github.com/elrumordelaluz/csshake</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_715.png" />
</p>
<h2>
6.Hover.css
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/9b5b7cc7d7416efab4bcdb45999d8515.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Ian Lunn
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：2.0.2
</p>
<p>
關注人氣： 在GitHub上有10700+個星贊。
</p>
<p>
簡介說明：將鼠標Hover效果快速應用在你的網頁元素或創意設計上。
</p>
<p>
文件大小:：104.2 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958836245611226786" target="_blank">https://github.com/IanLunn/Hover</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_681.png" />
</p>
<h2>
7.Velocity.js
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/869f57b4e81273c416990bf3634f5825.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Julian Shapiro
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：1.2.2
</p>
<p>
關注人氣： 在GitHub上有8700+個星贊。
</p>
<p>
簡介說明：幫你加速JavaScript動畫。
</p>
<p>
文件大小:：34.8 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958838693514877379" target="_blank">https://github.com/julianshapiro/velocity</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202548_846.png" />
</p>
<h2>
8.Favico.js
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/8554bcf4b07e33fe8e8b8a295468d90e.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Miroslav Magda
</p>
<p>
發布日期：2013年
</p>
<p>
最新版本：0.3.9
</p>
<p>
關注人氣： 在GitHub上有4900+個星贊。
</p>
<p>
簡介說明：讓你可以使用視頻、標志或圖片來設計站點的Favicon。
</p>
<p>
文件大小:：8.9 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958868095392795449" target="_blank">https://github.com/ejci/favico.js</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202548_384.png" />
</p>
<h2>
9.AniJS
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/a5836e3b770b8dbc14e1fc2b66e19a3f.png" width="605" height="288" />
</p>
<div>
<p>
創建者：anijs
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：0.9.3
</p>
<p>
關注人氣： 在GitHub上有2500+個星贊。
</p>
<p>
簡介說明：無須過多代碼照樣提升網頁設計逼格的動畫庫。
</p>
<p>
文件大小:：10.5 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958974830924376586" target="_blank">https://github.com/anijs/anijs</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/7bcc6ef1fca0f268da07855acacc013e.png" width="16" height="16" />
</p>
1. Animate.css
</h2>
<h2>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/eb174659597a330829e1243d08fc6e9d.jpg" width="605" height="382" />
</h2>
<div>
<p>
創建者：Daniel Eden
</p>
<p>
發布日期：2013年
</p>
<p>
最新版本：3.4.0
</p>
<p>
關注人氣： 在GitHub上有25000+個星贊。
</p>
<p>
簡介說明：一個簡單易用的跨瀏覽器CSS動畫庫。
</p>
<p>
文件大小:：55.2 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958194044253589366" target="_blank">https://github.com/daneden/animate.css</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202546_519.png" />
</p>
<h2>
2.Bounce.js
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/d7524ef558a0fd3aedf9a6d05acabf43.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Tictail
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：0.8.2
</p>
<p>
關注人氣： 在GitHub上有3500+個星贊。
</p>
<p>
簡介說明：即時創造漂亮的CSS3動畫。
</p>
<p>
文件大小:：16 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958875405115066229" target="_blank">https://github.com/tictail/bounce.js</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<h2>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202546_669.png" />
</h2>
<h2>
3.Magic Animations
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/1df90b15b6ced8321f317685ffe1de7f.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Christian
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：1.1.0
</p>
<p>
關注人氣： 在GitHub上有3400+個星贊。
</p>
<p>
簡介說明：可創造CSS3動畫特效。
</p>
<p>
文件大小:：36.5 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958542312824290297" target="_blank">https://github.com/miniMAC/magic</a>
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_572.png" />
</p>
<h2>
4.DynCSS
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/d012acc848ce095dca6b7bb813dab6bf.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Vittorio Zaccaria
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：0.8.1
</p>
<p>
關注人氣： 在GitHub上有190+個星贊。
</p>
<p>
簡介說明：用動態CSS來打造你的網頁。
</p>
<p>
文件大小:：36.5 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958974829920159680" target="_blank">https://github.com/vzaccaria/DynCSS</a>
</p>
</div>
<h2>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_847.png" />
</h2>
<h2>
5.CSShake
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/f67c1350a07f8a6a2a6005d6d132b154.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Lionel
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：1.5.0
</p>
<p>
關注人氣： 在GitHub上有2000+個星贊。
</p>
<p>
簡介說明：用CSS實現各種顛顫動畫效果DOM！
</p>
<p>
文件大小:：78.8 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958974830142430920" target="_blank">https://github.com/elrumordelaluz/csshake</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_715.png" />
</p>
<h2>
6.Hover.css
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/9b5b7cc7d7416efab4bcdb45999d8515.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Ian Lunn
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：2.0.2
</p>
<p>
關注人氣： 在GitHub上有10700+個星贊。
</p>
<p>
簡介說明：將鼠標Hover效果快速應用在你的網頁元素或創意設計上。
</p>
<p>
文件大小:：104.2 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958836245611226786" target="_blank">https://github.com/IanLunn/Hover</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202547_681.png" />
</p>
<h2>
7.Velocity.js
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/869f57b4e81273c416990bf3634f5825.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Julian Shapiro
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：1.2.2
</p>
<p>
關注人氣： 在GitHub上有8700+個星贊。
</p>
<p>
簡介說明：幫你加速JavaScript動畫。
</p>
<p>
文件大小:：34.8 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958838693514877379" target="_blank">https://github.com/julianshapiro/velocity</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202548_846.png" />
</p>
<h2>
8.Favico.js
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/8554bcf4b07e33fe8e8b8a295468d90e.jpg" width="605" height="382" />
</p>
<div>
<p>
創建者：Miroslav Magda
</p>
<p>
發布日期：2013年
</p>
<p>
最新版本：0.3.9
</p>
<p>
關注人氣： 在GitHub上有4900+個星贊。
</p>
<p>
簡介說明：讓你可以使用視頻、標志或圖片來設計站點的Favicon。
</p>
<p>
文件大小:：8.9 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958868095392795449" target="_blank">https://github.com/ejci/favico.js</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img src="http://static.open-open.com/news/uploadImg/20160112/20160112202548_384.png" />
</p>
<h2>
9.AniJS
</h2>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/a5836e3b770b8dbc14e1fc2b66e19a3f.png" width="605" height="288" />
</p>
<div>
<p>
創建者：anijs
</p>
<p>
發布日期：2014年
</p>
<p>
最新版本：0.9.3
</p>
<p>
關注人氣： 在GitHub上有2500+個星贊。
</p>
<p>
簡介說明：無須過多代碼照樣提升網頁設計逼格的動畫庫。
</p>
<p>
文件大小:：10.5 kB.
</p>
<p>
GitHub主頁： <a href="/misc/goto?guid=4958974830924376586" target="_blank">https://github.com/anijs/anijs</a>
</p>
<p>
版權許可： MIT
</p>
</div>
<p>
<img alt="2016九大前端必備動畫庫" src="https://simg.open-open.com/show/7bcc6ef1fca0f268da07855acacc013e.png" width="16" height="16" />
</p>
</div>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！