简介

的出现，让 有更多可玩性。

的用法可以看：

是轻量级类库，只依赖 。不依赖其他js库。

的主要功能是实现页面向下滚动的过程中，逐渐释放CSS动画效果。

也就是说，当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

只需短短几行代码，就能实现很多特效。

当然，也可以个性化定制喜欢的风格，比如延迟、动画执行时长、偏移、重复执行次数等。

官网很逗比，可以进入官网看看动画效果。

兼容性方面，和Animate.css是一样的。兼容IE10+和各大新版浏览器。

用法

1、首先要引入 Animate.css 和 WOW.js

Animate.css在官网有，可以看

当然也支持 和 这两种方式 下载。

2、实例化构造函数，调用基础方法。

说法是很牛的，但其实就是在js里面写上一句话 

3、写html结构

可以看到有一个大的box盒子，里面放着3个子 。

每个子div都有一个 类， 类就相当于 里的 这个基础类。

类是一定要的，因为它是一个基础类，如果不写上，后面一切都是徒劳。

类后面跟着的是动作类名，可以在 里面找。

4、最后我给这些div写一点样式，让它们能在页面中展示出来。

.box {
  width: 900px;
  margin: 100px auto;
  display: flex;
}

.box div {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.box div:nth-child(1) {
  background-color: #9C89B8;
}

.box div:nth-child(2) {
  background-color: #F0A6CA;
}

.box div:nth-child(3) {
  background: #B8BEDD;
}

就是这个效果

• sildeInLeft：从左边划入

• sildeInRight：从右边划入

• bounceIn：弹跳进入

以上就是基本用法。

上面的基础用法，看上去好像和 没什么区别。但如果我的页面是比较长的，而每个部分都有相应的动画，这时区别就出来了。

比如我的结构是这样的，下面还有很多个这种结构，只要页面向下滚动，对应元素在浏览器窗口中显示出来，就立即执行动画。

来点高级点的玩法。

在 元素上，还可以加上以下4个属性

• data-wow-delay：动画延迟执行

• data-wow-duration：动画执行时长

• data-wow-iteration：动画重复执行次数

• data-wow-offset：元素的位置露出后距离浏览器底部多少像素执行（偏移量）

data-wow-delay

动画延迟执行

可以传毫毛（ms），也可以传秒（s）。

data-wow-duration

动画执行时长

因为左边的div设置了data-wow-iteration=“2”，所以它的动画执行了2次。

data-wow-offset

元素的位置露出后距离浏览器底部多少像素执行（偏移量）

这个参数主要是滚动的时候用来控制动画时机。

比如

效果我就不展示了，可以在自己的编辑器上面写写看。