前面提到了animate.css，在這里推薦一個能與animate.css完美結合的控件——wow.js

WOW.js

WOW.js 是一款幫助你實現(xiàn)滾動頁面時觸發(fā)CSS 動畫效果的插件。
WOW.js 依賴 animate.css，所以它支持 animate.css 多達 60 多種的動畫效果，你可以改變動畫設置喜歡的風格、延遲、長度、偏移和迭代等，能滿足您的各種需求。
官方網(wǎng)址

wow.js

兼容性

兼容性

IE6、IE7 等老舊瀏覽器不支持 CSS3 動畫，所以沒有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本會報錯。為了達到更好的兼容，最好加一個瀏覽器及版本判斷。

使用方法

1、引入文件

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

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration（動畫持續(xù)時間）和 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>

3、JavaScript

new WOW().init();

如果需要自定義配置，可如下使用：

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

配置

offset為0時，設置動畫的元素在出現(xiàn)在瀏覽器可視區(qū)域時執(zhí)行動畫，想自定義的朋友可以自己更改設置。