站長(zhǎng)資訊網(wǎng)
css3不是只能實(shí)現(xiàn)一次動(dòng)畫(huà)；可利用“animation-iteration-count”屬性來(lái)定義動(dòng)畫(huà)播放的次數(shù)，當(dāng)屬性值設(shè)置為infinite時(shí)，播放次數(shù)為無(wú)限次，語(yǔ)法為“animation-iteration-count:播放次數(shù)”。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3只能實(shí)現(xiàn)一次動(dòng)畫(huà)嗎
css3不是只能實(shí)現(xiàn)一次動(dòng)畫(huà)。
利用animation-iteration-count即可。
animation-iteration-count屬性定義動(dòng)畫(huà)應(yīng)該播放多少次。默認(rèn)值為一。
語(yǔ)法
animation-iteration-count: value;
-
n 一個(gè)數(shù)字，定義應(yīng)該播放多少次動(dòng)畫(huà)
-
infinite 指定動(dòng)畫(huà)應(yīng)該播放無(wú)限次（永遠(yuǎn)）
示例如下：
<html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:3; /* Safari and Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:3; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本瀏覽器不支持 animation-iteration-count 屬性。</p> <div></div> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
