wow.js和animate.css下载地址：http://www.downyi.com/downinfo/37040.html

【用法】
在做项目中，有时需要做到滚动条滑到某个位置时，才能显示动画，wow.js插件可以很好的解决问题
下面说明一下怎么使用这个插件：

1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css

<link rel="stylesheet" href="css/animate.css">

2、在最底部引用wow.js或者wow.min.js，然后再下面再写一行javascript代码（无需引用jQuery）

<script type="text/javascript" src="js/wow.min.js"></script>  
<script type="text/javascript">  
    new WOW().init();  
</script>

注意：new WOW().init();中的WOW要大写，否则就没效果了

IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断

<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
</script>

3、在css下方js上方写需要动画的元素（必须设置为块状或者行内块状），并添加class类名
在需要动画的标签上添加.wow 和 你的动画元素即可

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。

后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选

注意：其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。

【下面依次测试各种class类名的动画效果】

wow rollIn	从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn	从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp	从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown	从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft	从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight	从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp	从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown	从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft	从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight	从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
wow flipInY	原位置左右旋动、透明度从100%变化至设定值
wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

js配置部分，如需自定义配置，可进行以下配置：

<script>
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
</script>

---

animate.css所有动画

<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组&nbsp;&nbsp;光速进入进出</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组&nbsp;&nbsp;旋转进入</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组&nbsp;&nbsp;旋转移出</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组&nbsp;&nbsp;滑入</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组&nbsp;&nbsp;滑出</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组&nbsp;&nbsp;放大</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>