現(xiàn)代的WEB應(yīng)用充滿(mǎn)了驚人的、博人眼球的特效，因此WEB開(kāi)發(fā)人員需要使用各種技術(shù)來(lái)實(shí)現(xiàn)這一目標(biāo)。前些年開(kāi)發(fā)者會(huì)使用Adobe Flash來(lái)為他們的網(wǎng)站添加互動(dòng)性，但是隨著HTML5、CSS、以及JavaScript庫(kù)的快速發(fā)展，F(xiàn)lash已經(jīng)要走出歷史的舞臺(tái)了。

相關(guān)閱讀：《Flash已死 Adobe鼓勵(lì)開(kāi)發(fā)人員使用HTML5》

2015年出現(xiàn)了很多開(kāi)源的動(dòng)畫(huà)庫(kù)，今天我們就在易用性、功能及流行度上，來(lái)盤(pán)點(diǎn)其中9個(gè)頂級(jí)的動(dòng)畫(huà)庫(kù)。

1. Animate.css

Animate.css 是當(dāng)前最流行、最易用的CSS動(dòng)畫(huà)庫(kù)。把Animate 庫(kù)應(yīng)用到你的項(xiàng)目中就如同為你項(xiàng)目中的元素添加一個(gè)類(lèi)名這樣簡(jiǎn)單。你也可以通過(guò)jQuery的事件來(lái)調(diào)用動(dòng)畫(huà)。

• 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 是當(dāng)前最流行、應(yīng)用最廣的CSS動(dòng)畫(huà)庫(kù)，壓縮后體積非常小，也可用于移動(dòng)站點(diǎn)。就我個(gè)人而言，我覺(jué)得這是我所遇到的最好的動(dòng)畫(huà)庫(kù)之一，我強(qiáng)烈推薦你在下一個(gè)項(xiàng)目中使用這個(gè)庫(kù)。

2. Bounce.js

Bounce.js是一種工具和JavaScript庫(kù)，專(zhuān)注于為你的網(wǎng)站提供獨(dú)特的彈性CSS動(dòng)畫(huà)。

• 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是一個(gè)整潔的動(dòng)畫(huà)庫(kù)，預(yù)置了大約10中動(dòng)畫(huà)效果，因此體積非常小。如果你不需要一個(gè)完整的動(dòng)畫(huà)類(lèi)型列表，可以考慮使用這個(gè)庫(kù)，并且可以從較低的文件大小開(kāi)銷(xiāo)中受益。

3. Magic Animations

Magic Animations是最令人印象深刻的動(dòng)畫(huà)庫(kù)之一，它有許多不同的動(dòng)畫(huà)，其中有許多是該庫(kù)獨(dú)有的。與Animate.css一樣，你只需導(dǎo)入Magic的CSS文件即可。你也可以在jQuery中使用動(dòng)畫(huà)。該項(xiàng)目提供了一個(gè)特別酷的演示程序。

• 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相比文件大小適中，它也因其獨(dú)有的效果而變得著名，比如其magic效果、foolish效果、bomb效果等。如果你正在尋找一些與眾不同的東西，我推薦你使用該庫(kù)，肯定不會(huì)令你失望的。

4. DynCSS

使用DynCSS，你可以為你的網(wǎng)站添加視差效果。為了能更清楚地知道你能用它做什么，可以查看這個(gè)演示。

• 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是一個(gè)非常簡(jiǎn)單的CSS庫(kù)，雖然它現(xiàn)在還是一個(gè)比較新的庫(kù)，但在不久的將來(lái)一定會(huì)流行起來(lái)，通過(guò)GitHub上Star的數(shù)量就可以證明。該庫(kù)其中一個(gè)非?？岬墓δ芫褪钱?dāng)滾動(dòng)時(shí)給元素添加旋轉(zhuǎn)效果，你可以從DynCSS 的主頁(yè)上看到該效果。

5. CSShake

CSShake正如其名字一樣–為網(wǎng)頁(yè)元素添加晃動(dòng)效果的CSS庫(kù)。正如你所期望的，它提供了很多晃動(dòng)效果組件。

• 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

蘋(píng)果普及了當(dāng)用戶(hù)輸入錯(cuò)誤時(shí)，UI元素晃動(dòng)的效果–就像一個(gè)人搖著頭說(shuō)“不”。CSShake提供了一系列有趣的“搖一搖”動(dòng)畫(huà)。雖然該庫(kù)目前比DynCSS更加受歡迎，但我覺(jué)得可能因其增加了很多不必要的功能而是文件過(guò)大。

6. Hover.css

Hover.css是一個(gè)為你網(wǎng)站按鈕或其他UI元素設(shè)計(jì)的CSS動(dòng)畫(huà)庫(kù)，它提供了非常好的二維旋轉(zhuǎn)，以及許多其它精心制作的動(dòng)畫(huà)。

• 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

正如其主頁(yè)所說(shuō)，Hover.css非常適合網(wǎng)頁(yè)元素，如按鈕、圖標(biāo)、SVG組件或特色圖像，它有一個(gè)全面的動(dòng)畫(huà)列表，因此體積比較大。

7. Velocity.js

Velocity.js是一個(gè)JavaScript動(dòng)畫(huà)庫(kù)，對(duì)于淡入淡出、滑動(dòng)、滾動(dòng)、停止、完成、倒放等效果非常適用。

• 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有時(shí)可能并不適用，因?yàn)槠涫褂玫腏avaScript動(dòng)畫(huà)引擎，實(shí)際上它使用的是jQuery的$.animate（）動(dòng)畫(huà)引擎API。有沒(méi)有jQuery它都可以用。我之所以把它列入這個(gè)名單是因?yàn)樗乃俣确浅？?，可以說(shuō)它是jQuery與CSS動(dòng)畫(huà)結(jié)合最好的庫(kù)。

8. favico.js

Favico.js的設(shè)計(jì)目標(biāo)非常明確：為你的網(wǎng)站圖表添加各種微章效果。WEB應(yīng)用程序需要通知他們的用戶(hù)有新的內(nèi)容，如新的文章、郵件、帖子等，你都可以從這個(gè)優(yōu)雅的小庫(kù)中受益。

• 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是一個(gè)非常適用于動(dòng)畫(huà)圖標(biāo)、徽章、圖像或視頻的庫(kù)，庫(kù)的大小已經(jīng)得到了很好的優(yōu)化。

9. AniJS

最后這個(gè)庫(kù)因其獨(dú)特的方法而非常有趣。AniJS是一個(gè)動(dòng)畫(huà)庫(kù)，允許你用下面的格式為元素添加動(dòng)畫(huà)效果：

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

總結(jié)

已經(jīng)有很多動(dòng)畫(huà)庫(kù)等著你在你的項(xiàng)目中實(shí)施。上面列出了一些復(fù)雜性與穩(wěn)定性最佳組合的庫(kù)。雖然動(dòng)畫(huà)可以為你的網(wǎng)站增加互動(dòng)性，但是過(guò)分的使用動(dòng)畫(huà)則會(huì)往往會(huì)混淆用戶(hù)。因此，要小心并明智的使用它們。

您是否使用動(dòng)畫(huà)庫(kù)來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)？你最喜歡的動(dòng)畫(huà)庫(kù)是什么？

via：SitePoint，由 Specs 翻譯整理，發(fā)布在 Coder資源網(wǎng)，轉(zhuǎn)載請(qǐng)注明來(lái)源。