一、利用场景

常常见到某些网站的动画是在屏幕显示到当前元素的时候，会有个过渡动画。

页面在向下滚动的时候，有些元素会产生眇小的动画效果。
虽然动画比较小，但却能吸引你的把稳

html滚动页面触发动画实现各年夜网站页面滚动加载动画 NoSQL
（图片来自网络侵删）

利用wow.js和Animate.css，实现各大网站常用的页面加载动画

1.wow.js

实现了在网页滚动时的动画效果，有俊秀的动画效果，依赖于Animate.css。

2.Animate.css

非常精良的CSS3动画库，不依赖于jQuery，纯CSS动画

二、利用方法

1,下载文件

animate.css 下载地址: 网址前缀+daneden.github.io/animate.css/

wow.min.js 下载地址: 网址前缀+www.downyi.com/downinfo/37040.html#address

2,引入文件

<link rel=\公众stylesheet\公众 href=\"大众css/animate.css\"大众 rel=\"大众external nofollow\公众 >

<script src=\"大众js/wow.min.js\"大众></script>

3、HTML

<div class=\公众wow slideInLeft\公众></div>

<div class=\"大众wow slideInRight\"大众></div>

可以加入 data-wow-duration（动画持续韶光）和 data-wow-delay（动画延迟韶光）

属性，如：

<div class=\"大众wow slideInLeft\"大众 data-wow-duration=\公众2s\"大众 data-wow-delay=\公众5s\"大众></div>

<div class=\"大众wow slideInRight\公众 data-wow-offset=\"大众10\公众 data-wow-iteration=\"大众10\公众></div>

4、JavaScript

new WOW().init();

要自定义配置，可如下利用：

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

});

wow.init();

三、兼容性

四、配置属性