想讓網(wǎng)頁(yè)動(dòng)起來(lái)，我們可以借助animate動(dòng)畫(huà)庫(kù)，里面提供了豐富的動(dòng)畫(huà)效果。

首先引入animate.css文件，可使用cdn或本地引入

然后給需要?jiǎng)赢?huà)的元素添加類(lèi)名：

具體的動(dòng)畫(huà)和其對(duì)應(yīng)的類(lèi)名可以去官網(wǎng)查看。

這樣就基本實(shí)現(xiàn)動(dòng)畫(huà)效果了，但除了剛進(jìn)入頁(yè)面的可視區(qū)域能看到動(dòng)畫(huà)效果外，其余非可視區(qū)域在還沒(méi)滾動(dòng)到位置的時(shí)候動(dòng)畫(huà)效果就已經(jīng)播放完了。我們需要一個(gè)工具來(lái)實(shí)現(xiàn)滾動(dòng)到誰(shuí)誰(shuí)播放的功能。這時(shí)我們就要用到wow.js，首先引入js庫(kù)，并給wow初始化，如圖所示：

然后在加了animate類(lèi)名的元素前面加上”wow”類(lèi)名。

Wow.js還提供了四個(gè)DOM屬性來(lái)控制動(dòng)畫(huà)的時(shí)間、次數(shù)和距離。

1、data-wow-duration：更改動(dòng)畫(huà)持續(xù)時(shí)間

2、data-wow-delay：動(dòng)畫(huà)開(kāi)始前的延遲

3、data-wow-iteration：動(dòng)畫(huà)的次數(shù)重復(fù)（無(wú)限次：infinite）

4、data-wow-offset：開(kāi)始動(dòng)畫(huà)的距離（與瀏覽器底部相關(guān)）