animate.css 是一個有趣，酷炫的，跨瀏覽器的動畫庫，你可以將它用於你的項目中。不管是主頁，滑動切換，又或者是其它方面，你都可以通過它來制作出驚人的效果。
基本用法
引入CSS文件
這個對你來說應該再容易不過了，我相信你可能也已經對引入外部的CSS樣式文件的代碼以及快捷鍵也都背得滾瓜爛熟了。 你只需要在HTML文件的head標簽中引入CSS樣式文件，如下：
<head> <link rel="stylesheet" href="animate.min.css"> </head> 輔助類
給你想添加動畫效果的元素添加一個 animated 類（必需）。如果需要動畫循環運動，你還需要給這個元素追加 infinite 類，又或者自己另外定義一個類似於 infinite 的類。
效果添加
接下來就是最后一步了，最激動人心，也是最重要的一步，為元素添加你想要的效果所對應的類名就大功告成了。下面我就列出來，你大可隨便挑，隨便選。
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
示例
<h1 class="animated infinite bounce">Example</h1>你可以通過這里來體驗 Animate.css 的強大效果：https://daneden.github.io/animate.css/
進階用法
正如上面所說的，把 animate.css 用到你的網站項目中，你只需要簡單地把下面的這一行代碼扔到你頁面的head 標簽里就可以了，接着就是給目標元素添加一個 animated 類。就這樣！你就可以得到一個酷炫的動畫效果了。
<head> <link rel="stylesheet" href="animate.min.css"> </head>jQuery 基本用法
你還可以通過 jQuery 或者自己定義的 CSS 規則來給目標元素一次性添加對應效果的 class 類。
$('#yourElement').addClass('animated bounceOutLeft');你還可以監聽動畫事件是否已經執行完畢，並執行回調函數。
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);擴展 jQuery
你還可以通過擴展 jQuery 來實現自己想要效果。
$.fn.extend({
animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; $(this).addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } });可以像下面這樣使用
$('#yourElement').animateCss('bounce');動畫延時
你還可以改變動畫運動時間，添加動畫延遲，或者直接修改默認配置的數字。
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }使用的時候記得把CSS樣式中的“vendor”用相應的前綴替換掉（webkit, moz, etc）。
定制構建
gulp.js 管理
Animate.css是通過 gulp.js 管理，你可以很輕易地創建自定義構建，首先你需要的就是一個Gulp
$ cd path/to/animate.css/ $ sudo npm installgulp.js 用法
接下來就是執行 gulp 來完成你的自定義構建。例如，如果你只想使用里面的一些效果，你就可以簡單的編輯 animate-config.json 來選擇你想要的效果代碼就好了。
"attention_seekers": { "bounce": true, "flash": false, "pulse": false, "shake": true, "headShake": true, "swing": true, "tada": true, "wobble": true, "jello":true }