這個css動畫庫包含了抖動、閃爍、彈跳、翻轉、旋轉、淡入淡出等多達 60 多種動畫效果，這些效果能滿足前端的日常需要，而且你也可以在上面進行改造。

因為Animate.css使用了CSS3的新屬性，所以老版本的瀏覽器是不支援的，目前能被支援的瀏覽器有：IE10+、Firefox、Chrome、Opera、Safari。

加這個動畫之後低版本的瀏覽器沒有任何的bug，除了沒有動畫之外0.0

整個庫壓縮之前24KB，壓縮之後最小能達到18kb，這個外掛要是在移動端執行，是一個不錯的選擇，祝你們用的愉快。

建議對GitHub不熟悉的可以直接進入官網下載。

下載之後就比較簡單了

直接link引進去

<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
然後在想要有動畫的div上加兩個class，一個是Animate.css的主要控制時間的animated，這個class是必須新增的，另一個是主要管理動畫的比如（flipOutX、bounceIn、bounceOut等等）。

下面我簡單的只做了一個例子，其實就是把所有的動畫都在頁面寫了一遍，有興趣的同學可以點選下方的執行看看。

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div id="cenggel"><a href="http://cenggel.com/">CGLweb前端</a></div>
<div id="btn_box">
<div date-class="animated bounce">bounce</div>
function(){   //跟單：www.gendan5.com

<div date-class="animated flash">flash</div>
<div date-class="animated pulse">pulse</div>
<div date-class="animated rubberBand">rubberBand</div>
<div date-class="animated shake">shake</div>
<div date-class="animated swing">swing</div>
<div date-class="animated tada">tada</div>
<div date-class="animated wobble">wobble</div>
<div date-class="animated jello">jello</div>
<div date-class="animated bounceIn">bounceIn</div>
<div date-class="animated bounceInDown">bounceInDown</div>
<div date-class="animated bounceInLeft">bounceInLeft</div>
<div date-class="animated bounceInRight">bounceInRight</div>
<div date-class="animated bounceInUp">bounceInUp</div>
<div date-class="animated bounceOut">bounceOut</div>
<div date-class="animated bounceOutDown">bounceOutDown</div>
<div date-class="animated bounceOutLeft">bounceOutLeft</div>
<div date-class="animated bounceOutRight">bounceOutRight</div>
<div date-class="animated bounceOutUp">bounceOutUp</div>
<div date-class="animated fadeIn">fadeIn</div>
<div date-class="animated fadeInDown">fadeInDown</div>
<div date-class="animated fadeInDownBig">fadeInDownBig</div>
<div date-class="animated fadeInLeft">fadeInLeft</div>
<div date-class="animated fadeInLeftBig">fadeInLeftBig</div>
<div date-class="animated fadeInRight">fadeInRight</div>
<div date-class="animated fadeInRightBig">fadeInRightBig</div>
<div date-class="animated fadeInUp">fadeInUp</div>
<div date-class="animated fadeInUpBig">fadeInUpBig</div>
<div date-class="animated fadeOut">fadeOut</div>
<div date-class="animated fadeOutDown">fadeOutDown</div>
<div date-class="animated fadeOutDownBig">fadeOutDownBig</div>
<div date-class="animated fadeOutLeft">fadeOutLeft</div>
<div date-class="animated fadeOutLeftBig">fadeOutLeftBig</div>
<div date-class="animated fadeOutRight">fadeOutRight</div>
<div date-class="animated fadeOutRightBig">fadeOutRightBig</div>
<div date-class="animated fadeOutUp">fadeOutUp</div>
<div date-class="animated fadeOutUpBig">fadeOutUpBig</div>
<div date-class="animated flip">flip</div>
<div date-class="animated flipInX">flipInX</div>
<div date-class="animated flipInY">flipInY</div>
<div date-class="animated flipOutX">flipOutX</div>
<div date-class="animated flipOutY">flipOutY</div>
<div date-class="animated lightSpeedIn">lightSpeedIn</div>
<div date-class="animated lightSpeedOut">lightSpeedOut</div>
<div date-class="animated rotateIn">rotateIn</div>
<div date-class="animated rotateInDownLeft">rotateInDownLeft</div>
<div date-class="animated rotateInDownRight">rotateInDownRight</div>
<div date-class="animated rotateInUpLeft">rotateInUpLeft</div>
<div date-class="animated rotateInUpRight">rotateInUpRight</div>
<div date-class="animated rotateOut">rotateOut</div>
<div date-class="animated rotateOutDownLeft">rotateOutDownLeft</div>
<div date-class="animated rotateOutDownRight">rotateOutDownRight</div>
<div date-class="animated rotateOutUpLeft">rotateOutUpLeft</div>
<div date-class="animated rotateOutUpRight">rotateOutUpRight</div>
<div date-class="animated slideInUp">slideInUp</div>
<div date-class="animated slideInDown">slideInDown</div>
<div date-class="animated slideInLeft">slideInLeft</div>
<div date-class="animated slideInRight">slideInRight</div>
<div date-class="animated slideOutUp">slideOutUp</div>
<div date-class="animated slideOutDown">slideOutDown</div>
<div date-class="animated slideOutLeft">slideOutLeft</div>
<div date-class="animated slideOutRight">slideOutRight</div>
<div date-class="animated zoomIn">zoomIn</div>
<div date-class="animated zoomInDown">zoomInDown</div>
<div date-class="animated zoomInLeft">zoomInLeft</div>
<div date-class="animated zoomInRight">zoomInRight</div>
<div date-class="animated zoomInUp">zoomInUp</div>
<div date-class="animated zoomOut">zoomOut</div>
<div date-class="animated zoomOutDown">zoomOutDown</div>
<div date-class="animated zoomOutLeft">zoomOutLeft</div>
<div date-class="animated zoomOutRight">zoomOutRight</div>
<div date-class="animated zoomOutUp">zoomOutUp</div>
<div date-class="animated hinge">hinge</div>
<div date-class="animated jackInTheBox">jackInTheBox</div>
<div date-class="animated rollIn">rollIn</div>
<div date-class="animated rollOut">rollOut</div>
</div>
<style type="text/css">
*{ margin:0; padding:0;}
#btn_box{ width:100%; overflow:hidden; height:1900px;}
#btn_box div{ width:31%; margin:30px 1%; background:#409fb6; color:#fff; text-align:center; height:40px; line-height:40px; font-size:20px; font-weight:bold; float:left; cursor:pointer;}
#cenggel{text-align:center; font-size:20px; line-height:40px;}
#cenggel a{ color:#000;}
.animated{ background:#409F81 !important; z-index:132;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var cgl_on_off = true;
$('#btn_box div').click(function(){
if (cgl_on_off){
var class_get = $(this).attr('date-class');
$(this).addClass(class_get);
cgl_on_off = false;
setTimeout(function(){
$('#btn_box div').attr('class','')
cgl_on_off = true;
},1500)
}
});
})