站長資訊網
css3不是只能實現一次動畫；可利用“animation-iteration-count”屬性來定義動畫播放的次數，當屬性值設置為infinite時，播放次數為無限次，語法為“animation-iteration-count:播放次數”。
本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3只能實現一次動畫嗎
css3不是只能實現一次動畫。
利用animation-iteration-count即可。
animation-iteration-count屬性定義動畫應該播放多少次。默認值為一。
語法
animation-iteration-count: value;
-
n 一個數字，定義應該播放多少次動畫
-
infinite 指定動畫應該播放無限次（永遠）
示例如下：
<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>
輸出結果：
（學習視頻分享：css視頻教程）
