簡單粗暴的被我總結成這樣 要什么效果，只需引入animate.css，添加對應的class類名，即可實現所有動畫效果，翻譯隨意的奧。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate.css 所有動畫</title>
<link rel="stylesheet" href="animate.css">
<style>
*{padding:0;margin:0 auto;}
.main{width:800px;}
.padding{padding:20px;}
.mtop{margin-top:20px;}
.ml{margin-left:15px;}
.border{border:1px solid #e8e8e8;}
p{line-height:45px;font-size:25px;color:#666;}
p:nth-child(2n){color:red;}
h1,h2{line-height:40px;font-size:20px;}
</style>
</head>
<div class="border mtop main padding">
<h1>Animate.css 所有動畫</h1>
<!--Animate.css總共有14組動畫，包括5對動畫，4組單一的動畫-->
<!--Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在項目中引用。-->
<h2 class="mtop">第1組-彈跳</h2>
<p class="animated bounce bounce">animated bounce bounce <span class="ml">彈跳</span></p>
<p class="animated bounce flash">animated bounce flash<span class="ml">反射閃光</span></p>
<p class="animated bounce pulse">animated bounce pulse<span class="ml">反彈脈沖 </span></p>
<p class="animated bounce rubberBand">animated bounce rubberBand<span class="ml">跳橡皮筋 </span></p>
<p class="animated bounce shake">animated bounce shake<span class="ml">彈抖 </span></p>
<p class="animated bounce swing">animated bounce swing<span class="ml">彈跳擺動 </span></p>
<p class="animated bounce tada">animated bounce tada<span class="ml">彈跳多田 </span></p>
<p class="animated bounce wobble">animated bounce wobble<span class="ml">彈跳抖動 </span></p>
<p class="animated bounce jello">animated bounce jello<span class="ml">彈跳果凍</span></p>
<h2 class="mtop">第2組-彈入</h2>
<p class="animated bounce bounceIn">animated bounce bounceIn<span class="ml">本地反彈</span></p>
<p class="animated bounce bounceInDown">animated bounce bounceInDown<span class="ml">從上往下進入反彈</span></p>
<p class="animated bounce bounceInLeft">animated bounce bounceInLeft<span class="ml">從左進入反彈 </span></p>
<p class="animated bounce bounceInRight">animated bounce bounceInRight<span class="ml">從右進入反彈 </span></p>
<p class="animated bounce bounceInUp">animated bounce bounceInUp<span class="ml">從下往上進入反彈 </span></p>
<h2 class="mtop">第3組-彈出</h2>
<p class="animated bounce bounceOut">animated bounce bounceOut<span class="ml">本地彈出</span></p>
<p class="animated bounce bounceOutDown">animated bounce bounceOutDown<span class="ml">往下彈出</span></p>
<p class="animated bounce bounceOutLeft">animated bounce bounceOutLeft<span class="ml">往左彈出</span></p>
<p class="animated bounce bounceOutRight">animated bounce bounceOutRight<span class="ml">往右彈出</span></p>
<p class="animated bounce bounceOutUp">animated bounce bounceOutUp<span class="ml"></span>往上彈出</p>
<h2 class="mtop">第4組-淡入</h2>
<p class="animated bounce fadeIn">animated bounce fadeIn<span class="ml">本地漸顯</span></p>
<p class="animated bounce fadeInDown">animated bounce fadeInDown<span class="ml">本地從上往下漸顯</span></p>
<p class="animated bounce fadeInDownBig">animated bounce fadeInDownBig<span class="ml">從上往下淡入</span></p>
<p class="animated bounce fadeInLeft">animated bounce fadeInLeft<span class="ml">從左淡入</span></p>
<p class="animated bounce fadeInLeftBig">animated bounce fadeInLeftBig<span class="ml">從左從小到大淡入</span></p>
<p class="animated bounce fadeInRight">animated bounce fadeInRight<span class="ml">從右淡入</span></p>
<p class="animated bounce fadeInRightBig">animated bounce fadeInRightBig<span class="ml">從右從小到大淡入</span></p>
<p class="animated bounce fadeInUp">animated bounce fadeInUp<span class="ml">本地從下往上漸顯</span></p>
<p class="animated bounce fadeInUpBig">animated bounce fadeInUpBig<span class="ml">本地從下往上從小變大漸顯</span></p>
<h2 class="mtop">第5組-淡出</h2>
<p class="animated bounce fadeOut">animated bounce fadeOut<span class="ml">本地淡出</span></p>
<p class="animated bounce fadeOutDown">animated bounce fadeOutDown<span class="ml">本地從上往下淡出</span></p>
<p class="animated bounce fadeOutDownBig">animated bounce fadeOutDownBig<span class="ml">從上往下淡出</span></p>
<p class="animated bounce fadeOutLeft">animated bounce fadeOutLeft<span class="ml">從左淡出</span></p>
<p class="animated bounce fadeOutLeftBig">animated bounce fadeOutLeftBig<span class="ml">從左從小到大淡出</span></p>
<p class="animated bounce fadeOutRight">animated bounce fadeOutRight<span class="ml">從右淡出</span></p>
<p class="animated bounce fadeOutRightBig">animated bounce fadeOutRightBig<span class="ml">從右從小到大淡出</span></p>
<p class="animated bounce fadeOutUp">animated bounce fadeOutUp<span class="ml">本地從下往上漸隱</span></p>
<p class="animated bounce fadeOutUpBig">animated bounce fadeOutUpBig<span class="ml">本地從下往上從小變大漸隱</span></p>
<h2 class="mtop">第6組-翻轉</h2>
<p class="animated bounce flip">animated bounce flip<span class="ml">本地翻轉</span></p>
<p class="animated bounce flipInX">animated bounce flipInX<span class="ml">沿x軸翻轉</span></p>
<p class="animated bounce flipInY">animated bounce flipInY<span class="ml">沿y軸翻轉</span></p>
<p class="animated bounce flipOutX">animated bounce flipOutX<span class="ml">沿x軸翻轉淡出</span></p>
<p class="animated bounce flipOutY">animated bounce flipOutY<span class="ml">沿y軸翻轉淡出</span></p>
<h2 class="mtop">第7組 光速進入進出</h2>
<p class="animated bounce lightSpeedIn">animated bounce lightSpeedIn<span class="ml">右邊光速進入</span></p>
<p class="animated bounce lightSpeedOut">animated bounce lightSpeedOut<span class="ml">右邊光速淡出</span></p>
<h2 class="mtop">第8組 旋轉進入</h2>
<p class="animated bounce rotateIn">animated bounce rotateIn<span class="ml">旋轉進入</span></p>
<p class="animated bounce rotateInDownLeft">animated bounce rotateInDownLeft<span class="ml">左固定從上往下旋轉進入</span></p>
<p class="animated bounce rotateInDownRight">animated bounce rotateInDownRight<span class="ml">本地從上往下進入</span></p>
<p class="animated bounce rotateInUpLeft">animated bounce rotateInUpLeft<span class="ml">左固定從下往上旋轉進入</span></p>
<p class="animated bounce rotateInUpRight">animated bounce rotateInUpRight<span class="ml">從右邊旋轉從下往上進入</span></p>
<h2 class="mtop">第9組 旋轉移出</h2>
<p class="animated bounce rotateOut">animated bounce rotateOut<span class="ml">旋轉移出</span></p>
<p class="animated bounce rotateOutDownLeft">animated bounce rotateOutDownLeft<span class="ml">左固定從上往下旋轉移出</span></p>
<p class="animated bounce rotateOutDownRight">animated bounce rotateOutDownRight<span class="ml">本地從上往下移出</span></p>
<p class="animated bounce rotateOutUpLeft">animated bounce rotateOutUpLeft<span class="ml">左固定從下往上旋轉移出</span></p>
<p class="animated bounce rotateOutUpRight">animated bounce rotateOutUpRight<span class="ml">從右邊旋轉從下往上移出</span></p>
<h2 class="mtop">第10組 滑入</h2>
<p class="animated bounce slideInUp">animated bounce slideInUp<span class="ml">本地從下往上滑入</span></p>
<p class="animated bounce slideInDown">animated bounce slideInDown<span class="ml">本地從上往下滑入</span></p>
<p class="animated bounce slideInLeft">animated bounce slideInLeft<span class="ml">從左滑入</span></p>
<p class="animated bounce slideInRight">animated bounce slideInRight<span class="ml">從右滑入</span></p>
<h2 class="mtop">第11組 滑出</h2>
<p class="animated bounce slideOutUp">animated bounce slideOutUp<span class="ml">從下往上滑出</span></p>
<p class="animated bounce slideOutDown">animated bounce slideOutDown<span class="ml">從上往下滑出</span></p>
<p class="animated bounce slideOutLeft">animated bounce slideOutLeft<span class="ml">往左滑出</span></p>
<p class="animated bounce slideOutRight">animated bounce slideOutRight<span class="ml">往右滑出</span></p>
<h2 class="mtop">第12組 放大</h2>
<p class="animated bounce zoomIn">animated bounce zoomIn<span class="ml">從下放大進入</span></p>
<p class="animated bounce zoomInDown">animated bounce zoomInDown<span class="ml">從上往下放大進入</span></p>
<p class="animated bounce zoomInLeft">animated bounce zoomInLeft<span class="ml">從左放大進入</span></p>
<p class="animated bounce zoomInRight">animated bounce zoomInRight<span class="ml">從右放大進入</span></p>
<p class="animated bounce zoomInUp">animated bounce zoomInUp<span class="ml">從下往上放大進入</span></p>
<h2 class="mtop">第13組-縮小</h2>
<p class="animated bounce zoomOut">animated bounce zoomOut<span class="ml">從下縮小進入 </span></p>
<p class="animated bounce zoomOutDown">animated bounce zoomOutDown<span class="ml"></span>從上往下縮小進入</p>
<p class="animated bounce zoomOutLeft">animated bounce zoomOutLeft<span class="ml">從左縮小進入</span></p>
<p class="animated bounce zoomOutRight">animated bounce zoomOutRight<span class="ml">從右縮小進入</span></p>
<p class="animated bounce zoomOutUp">animated bounce zoomOutUp<span class="ml">從下往上縮小進入</span></p>
<h2 class="mtop">第14組</h2>
<p class="animated bounce hinge">animated bounce hinge<span class="ml">反彈鉸鏈 </span></p>
<p class="animated bounce jackInTheBox">animated bounce jackInTheBox<span class="ml">玩偶 </span></p>
<p class="animated bounce rollIn">animated bounce rollIn<span class="ml">彈跳滾動進入</span></p>
<p class="animated bounce rollOut">animated bounce rollOut<span class="ml">彈跳滾動移出</span></p>
</div>
</body>
</html>