wow.js

demo地址：http://www.dowebok.com/131.html
git ：https://github.com/matthieua/WOW

<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
    new WOW().init();
</script>

类名前面的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  原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

打开引用的animate.css或者animate.min.css，里面@keyframes定义了各种动画，将wow后面的类名替换一下测试效果就可以了。关于animate的使用可参考http://www.dowebok.com/98.html 。
配合data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可以完成很多效果，主要还是多实践，想要什么效果可以自己选择添加使用。

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

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