最近在網上看到很多代碼都通過引入animate.css來實現動畫效果，后來我便使用這種方法來嘗試着寫了個小案例，結果真的很好用，比我們通常情況下使用css或js實現動畫效果好得多，便在此做個總結。
第一步，便是下載相關的animate.css文件，方法有三種：
1.從官網下載：
https://raw.github.com/daneden/animate.css/master/animate.css
2.通過npm下載：
$ npm install animate.css
3.使用在線cdn：
https://unpkg.com/animate.css@3.5.2/animate.min.css
第二步，便是寫上頁面結構，引入animate.css文件：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" type="" href="./animate.css"> 8 <title>Document</title> 9 <style> 10 #dowebok { 11 height: 100px; 12 width: 100px; 13 background-color: pink; 14 } 15 </style> 16 </head> 17 <body> 18 <!-- <div class="animated bounce" id="dowebok"></div> --> 19 <!-- <div class="animated flash" id="dowebok"></div> --> 20 <!-- <div class="animated pulse" id="dowebok"></div> --> 21 <!-- <div class="animated rubberBand" id="dowebok"></div> --> 22 <!-- <div class="animated shake" id="dowebok"></div> --> 23 <!-- <div class="animated headShake" id="dowebok"></div> --> 24 <!-- <div class="animated swing" id="dowebok"></div> --> 25 <!-- <div class="animated tada" id="dowebok"></div> --> 26 <!-- <div class="animated wobble" id="dowebok"></div> --> 27 <!-- <div class="animated jello" id="dowebok"></div> --> 28 <!-- <div class="animated slideInDown" id="dowebok"></div> --> 29 <div class="animated rotateIn" id="dowebok"></div> 30 </body> 31 </html>
如上代碼所示，這里邊通過添加不同的類，便可以實現不同的動畫效果，下面邊介紹一下相關的類：
主要的動畫大類有Attention(晃動效果)、bounce(彈性緩沖效果)、fade(透明度變化效果)、flip(翻轉效果)、rotate(旋轉效果)、slide(滑動效果)、zoom(變焦效果)、special(特殊效果)這8類。
（1）Attention(晃動效果)】
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
（2）【bounce(彈性緩沖效果)】
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
（3）【fade(透明度變化效果)】
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
（4）【flip(翻轉效果)】
flip
flipInX
flipInY
flipOutX
flipOutY
（5）【rotate(旋轉效果)】
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
（6）【slide(滑動效果)】
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
（7）【zoom(變焦效果)】
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
（8）【special(特殊效果)】
hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut
實際應用
通過給JS添加或刪除class，可以實現動態效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css"> 7 <style> 8 .box{height: 100px;width: 100px;background-color: lightblue} 9 </style> 10 </head> 11 <body> 12 <button id="btn1">添加</button> 13 <button id="btn2">移除</button> 14 <div id="box" class="box"></div> 15 <script> 16 var oBtn1 = document.getElementById('btn1'); 17 var oBtn2 = document.getElementById('btn2'); 18 var oBox = document.getElementById('box'); 19 oBtn1.onclick = function(){ 20 oBox.classList.add('animated'); 21 oBox.classList.add('flash'); 22 } 23 oBtn2.onclick = function(){ 24 oBox.classList.remove('flash'); 25 } 26 </script> 27 </body> 28 </html>
至於動畫的配置參數，比如動畫持續時間，動畫的執行次數等等，可以在元素上自行定義，覆蓋掉animate.css里面所定義的就行了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css"> 7 <style> 8 .box{height: 100px;width: 100px;background-color: lightblue} 9 .infinite{animation-iteration-count:infinite;} 10 </style> 11 </head> 12 <body> 13 <button id="btn1">添加循環的動畫效果</button> 14 <button id="btn2">移除</button> 15 <div id="box" class="box"></div> 16 <script> 17 var oBtn1 = document.getElementById('btn1'); 18 var oBtn2 = document.getElementById('btn2'); 19 var oBox = document.getElementById('box'); 20 oBtn1.onclick = function(){ 21 oBox.classList.add('animated'); 22 oBox.classList.add('flash'); 23 oBox.classList.add('infinite'); 24 } 25 oBtn2.onclick = function(){ 26 oBox.classList.remove('flash'); 27 } 28 </script> 29 </body> 30 </html>
這也僅僅是通過http://www.cnblogs.com/xiaohuochai/p/7372665.html學習來的東西，便現學現賣了~