animate里面包含了許多常用的css動(dòng)畫(huà)，我們要使用的它的話需要把它加到自己的頁(yè)面中，接著就可以在需要?jiǎng)赢?huà)的元素標(biāo)簽上直接調(diào)用里面的動(dòng)畫(huà)，然后調(diào)節(jié)動(dòng)畫(huà)次數(shù)延遲等達(dá)到自己需要的效果就可以了。

animate.css怎么使用？

1、在文件夾中放入animate的css文件，以及一個(gè)html文件。|-project

∟index.html

∟animate.min.css

2、在html的頭部添加我們的animate文件。(推薦學(xué)習(xí)：CSS視頻教程)

Document

3、在需要?jiǎng)赢?huà)的標(biāo)簽上添加 class="animated bounce delay-3s"，延遲3秒后播放animate中的bounce上下跳動(dòng)動(dòng)畫(huà)。

animate.css怎么用？

4、在中間添加個(gè)infinite就可以循環(huán)播放動(dòng)畫(huà)。

animate.css怎么用？

5、我們還可以 自己添加class樣式，在里面設(shè)置播放速度5秒，延遲2秒，循環(huán)播放，把定義好的 直接寫(xiě)到標(biāo)簽class前面 就可以了。

.my-anim{

animation-duration: 5s;

animation-delay: 2s;

animation-iteration-count: infinite;

}

animate.css怎么用？

animate.css怎么用？

6、如果要設(shè)置播放次數(shù)，可以把infinite修改為2，就是播放兩次。

.my-anim{

animation-duration: 5s;

animation-delay: 2s;

animation-iteration-count: 2;

}

7、在瀏覽器打開(kāi)就可以看到文字跳動(dòng)的動(dòng)畫(huà)了,其它的動(dòng)畫(huà)同樣如此使用，只需要修改動(dòng)畫(huà)名字就可以了。

更多CSS3相關(guān)技術(shù)文章，請(qǐng)?jiān)L問(wèn)CSS3答疑欄目進(jìn)行學(xué)習(xí)！

總結(jié)

以上是生活随笔為你收集整理的animate中使用HTML5,animate.css怎么使用？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。