可以為2016年備用的9個頂級動畫庫
現代的WEB應用充滿了驚人的、博人眼球的特效，因此WEB開發人員需要使用各種技術來實現這一目標。前些年開發者會使用 Adobe Flash來為他們的網站添加互動性，但是隨著HTML5、CSS、以及JavaScript庫的快速發展，Flash已經要走出歷史的舞臺了。
2015年出現了很多開源的動畫庫，今天我們就在易用性、功能及流行度上，來盤點其中9個頂級的動畫庫。
1. Animate.css
Animate.css 是當前最流行、最易用的CSS動畫庫。把Animate 庫應用到你的項目中就如同為你項目中的元素添加一個類名這樣簡單。你也可以通過jQuery的事件來調用動畫。
- Creators: Daniel Eden
- Released: 2013
- Current Version: 3.4.0
- Popularity: 25,000+ stars on GitHub
- Description: “A cross-browser library of CSS animations. As easy to use as an easy thing.”
- Library Size: 55.2 kB
- GitHub: https://github.com/daneden/animate.css
- License: MIT
Animate.css 是當前最流行、應用最廣的CSS動畫庫，壓縮后體積非常小，也可用于移動站點。就我個人而言，我覺得這是我所遇到的最好的動畫庫之一，我強烈推薦你在下一個項目中使用這個庫。
2. Bounce.js
Bounce.js是一種工具和JavaScript庫，專注于為你的網站提供獨特的彈性CSS動畫。
- Creators: Tictail
- Released: 2014
- Current Version: 0.8.2
- Popularity: 3,500+ stars on GitHub
- Description: “Create beautiful CSS3 powered animations in no time.”
- Library Size: 16 kB
- GitHub: https://github.com/tictail/bounce.js
- License: MIT
Bounce.js是一個整潔的動畫庫，預置了大約10中動畫效果，因此體積非常小。如果你不需要一個完整的動畫類型列表，可以考慮使用這個庫，并且可以從較低的文件大小開銷中受益。
3. Magic Animations
Magic Animations是最令人印象深刻的動畫庫之一，它有許多不同的動畫，其中有許多是該庫獨有的。與Animate.css一樣，你只需導入Magic的CSS文件即可。你也可以在jQuery中使用動畫。該項目提供了一個特別酷的演示程序。
- Creators: Christian
- Released: 2014
- Current Version: 1.1.0
- Popularity: 3,400+ stars on GitHub
- Description: “CSS3 Animations with special effects”
- Library Size: 36.5 kB
- GitHub: https://github.com/miniMAC/magic
Magic animation與animate.css相比文件大小適中，它也因其獨有的效果而變得著名，比如其magic效果、foolish效果、bomb效果等。如果你正在尋找一些與眾不同的東西，我推薦你使用該庫，肯定不會令你失望的。
4. DynCSS
使用DynCSS，你可以為你的網站添加視差效果。為了能更清楚地知道你能用它做什么，可以查看這個演示。
- Creators: Vittorio Zaccaria
- Released: 2014
- Current Version: 0.8.1
- Popularity: 190+ stars on GitHub
- Description: “Make your site come to life with Dynamic CSS.”
- GitHub: https://github.com/vzaccaria/DynCSS
DynCSS是一個非常簡單的CSS庫，雖然它現在還是一個比較新的庫，但在不久的將來一定會流行起來，通過GitHub上Star的數量就可以證明。該庫其中一個非常酷的功能就是當滾動時給元素添加旋轉效果，你可以從DynCSS 的主頁上看到該效果。
5. CSShake
CSShake正如其名字一樣–為網頁元素添加晃動效果的CSS庫。正如你所期望的，它提供了很多晃動效果組件。
- Creators: Lionel
- Released: 2014
- Popularity: 2,000+ stars on GitHub
- Description: “CSS classes to move your DOM!”
- Library Size: 78.8 kB
- GitHub: https://github.com/elrumordelaluz/csshake
- License: MIT
蘋果普及了當用戶輸入錯誤時，UI元素晃動的效果–就像一個人搖著頭說“不”。CSShake提供了一系列有趣的“搖一搖”動畫。雖然該庫目前比DynCSS更加受歡迎，但我覺得可能因其增加了很多不必要的功能而是文件過大。
6. Hover.css
Hover.css是一個為你網站按鈕或其他UI元素設計的CSS動畫庫，它提供了非常好的二維旋轉，以及許多其它精心制作的動畫。
- Creators: Ian Lunn
- Released: 2014
- Current Version: 2.0.2
- Popularity: 10,700+ stars on GitHub
- Description: “Easily apply to your own elements, modify or just use for inspiration.”
- Library Size: 104.2 kB
- GitHub: https://github.com/IanLunn/Hover
- License: MIT
正如其主頁所說，Hover.css非常適合網頁元素，如按鈕、圖標、SVG組件或特色圖像，它有一個全面的動畫列表，因此體積比較大。
7. Velocity.js
Velocity.js是一個JavaScript動畫庫，對于淡入淡出、滑動、滾動、停止、完成、倒放等效果非常適用。
- Creators: Julian Shapiro
- Released: 2014
- Current Version: 1.2.2
- Popularity: 8,700+ stars on GitHub
- Description: “Accelerated JavaScript animation.”
- Library Size: 34.8 kB
- GitHub: https://github.com/julianshapiro/velocity
- License: MIT
Velocity有時可能并不適用，因為其使用的JavaScript動畫引擎，實際上它使用的是jQuery的$.animate（）動畫引擎 API。有沒有jQuery它都可以用。我之所以把它列入這個名單是因為它的速度非常快，可以說它是jQuery與CSS動畫結合最好的庫。
8. favico.js
Favico.js的設計目標非常明確：為你的網站圖表添加各種微章效果。WEB應用程序需要通知他們的用戶有新的內容，如新的文章、郵件、帖子等，你都可以從這個優雅的小庫中受益。
- Creators: Miroslav Magda
- Released: 2013
- Current Version: 0.3.9
- Popularity: 4,900+ stars on GitHub
- Description: “Make use of your favicon with badges, images or videos.”
- Library Size: 8.9 kB
- GitHub: https://github.com/ejci/favico.js
- License: MIT
Favicon.js是一個非常適用于動畫圖標、徽章、圖像或視頻的庫，庫的大小已經得到了很好的優化。
9. AniJS
最后這個庫因其獨特的方法而非常有趣。AniJS是一個動畫庫，允許你用下面的格式為元素添加動畫效果：
If click, On Square, Do wobble animated To .container-box
<div data-anijs="if: click, do: flipInY, to: .container-box"></div>
- Creators: anijs
- Released: 2014
- Current Version: 0.9.3
- Popularity: 2,500+ stars on GitHub
- Description: “A Library to Raise your Web Design without Coding.”
- Library Size: 10.5 kB
- GitHub: https://github.com/anijs/anijs
- License: MIT
總結
已經有很多動畫庫等著你在你的項目中實施。上面列出了一些復雜性與穩定性最佳組合的庫。雖然動畫可以為你的網站增加互動性，但是過分的使用動畫則會往往會混淆用戶。因此，要小心并明智的使用它們。
您是否使用動畫庫來進行項目開發？你最喜歡的動畫庫是什么？