Animate.css 使用教程（一個強大的 CSS3 動畫庫）
前言
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 用到你的網站專案中，你只需要簡單地把下面的這一行程式碼扔到你頁面的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）。