在CSS3中，我們可以使用animation-iteration-count屬性來定義動畫的播放次數。
語法：
animation-iteration-count：取值;
說明：
animation-iteration-count屬性取值有2種：
animation-iteration-count屬性默認值為1。也就是默認情況下，動畫從開始到結束只播放一次。“animation-iteration-count:n”表示動畫播放n次，n為正整數；
當animation-iteration-count屬性取值為infinite時，動畫會無限次地循環播放。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-iteration-count屬性</title>
<style type="text/css">
@-webkit-keyframes mytranslate
{
0%{}
50%{-webkit-transform:translateX(100px);}
100%{}
}
#div1
{
width:40px;
height:40px;
border-radius:20px;
background-color:red;
-webkit-animation-name:mytranslate;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
}
#container
{
display:inline-block;
width:140px;
border:1px solid silver;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡設置animation-iteration-count屬性值為infinite，然後動畫會不斷循環播放。大家試著把“-webkit-transform:translateX(100px);”放到100%{}中，看看實際效果如何？