炫酷的動畫是現代網頁設計中必不可少的元素，它能為頁面增加趣味性，更能抓住用戶的眼球，同時提高了頁面的檔次。今天老猿為大家介紹一款國外的動畫庫 - Animate.css。它簡單易用，功能非常強大。通過添加相應的css，就可實現炫酷的動畫。

您可以在官網上在線體驗一下

官網地址：https://daneden.github.io/animate.css/

安裝方法：

1.通過npm安裝

<code>$ npm install animate.css --save/<code>

2.通過yarn安裝

<code>$ yarn add animate.css/<code>

使用方法：

<code>
  <link>
/<code>

或者

<code>
  <link>
/<code>

這個動畫庫的神奇之處在於，您只需要引入這個css，而不需要額外的javascript庫（jquery庫是必須的）。

案例：

<code>
Example
/<code>

預定義的class：

具體這些class類能夠實現哪些動畫效果，我相信聰明的您通過這些類的名稱應該能夠腦補出來吧。官網上都有相應的演示，小白可以參考。有興趣的朋友可以加個關注，我會不斷的介紹各種有趣好玩的前端類庫，希望您能在項目中用到。

閱讀更多 程序猿有話說 的文章

關鍵字: jQuery 網頁設計 JavaScript