<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background: skyblue;
margin: 10 auto;
}
</style>
</head>
<body>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<div class="div1 wow bounceIn">
</div>
<!--
持续时间/延迟时间/偏移值/迭代次数
-->
<div class="div1 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="div1 wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
<script src="js/wow.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var obj = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
}
new WOW(obj).init();
//属性/方法 类型 默认值 说明
//boxClass 字符串 ‘wow’ ‘wow’需要执行动画的元素的 class
//animateClass 字符串 ‘animated’ ‘animated’animation.css 动画的 class
//offset 整数 0 距离可视区域多少开始执行动画
//mobile 布尔值 true 是否在移动设备上执行动画
//live 布尔值 true 异步加载的内容是否有效
</script>
</body>
</html>