animate.css引入实现动画效果
最近在網上看到很多代碼都通過引入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學習來的東西，便現學現賣了~
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的animate.css引入实现动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 201314这日子太难得了，送祝福吧！
- 下一篇： DSP vs CPU