最近在网上看到很多代码都通过引入animate.css来实现动画效果，后来我便使用这种方法来尝试着写了个小案例，结果真的很好用，比我们通常情况下使用css或js实现动画效果好得多，便在此做个总结。
第一步，便是下载相关的animate.css文件，方法有三种：
1.从官网下载：
/daneden/animate.css/master/animate.css
2.通过npm下载：
$ npm install animate.css
3.使用在线cdn：
/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(晃动效果)】
bounceflashpulserubberBandshakeheadShakeswingtadawobblejello
（2）【bounce(弹性缓冲效果)】
bounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUp
（3）【fade(透明度变化效果)】
fadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBig
（4）【flip(翻转效果)】
flipflipInXflipInYflipOutXflipOutY
（5）【rotate(旋转效果)】
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight
（6）【slide(滑动效果)】
slideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
（7）【zoom(变焦效果)】
zoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUp
（8）【special(特殊效果)】
hingerollInrollOutlightSpeedInlightSpeedOut
实际应用
通过给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="/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="/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>
这也仅仅是通过/xiaohuochai/p/7372665.html学习来的东西，便现学现卖了~
更多专业前端知识，请上 【猿2048】
