在CSS3中，我们可以使用animation-iteration-count属性来定义动画的播放次数。

语法：

animation-iteration-count: 取值;

说明：

animation-iteration-count属性取值有两种：一种是“正整数”；另外一种是“infinite”。当取值是n（正整数）时，表示动画播放n次；当取值为infinite时，表示动画播放无数次，也就是循环播放。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @keyframes mytranslate
        {
            0%{}
            50%{transform:translateX(160px);}
            100%{} 
        }
        #ball
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            animation-name:mytranslate;
            animation-timing-function:linear;
            animation-duration:2s;
            animation-iteration-count:infinite;  /*循环播放*/
        }
        #container
        {
            display:inline-block;
            width:200px;
            border:1px solid silver;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="ball"></div>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

这里定义animation-iteration-count属性值为infinite。当打开页面时动画会自动播放，并且会无限循环播放。

这里留个问题让小伙伴们思考一下：大家试着把transform:translateX(160px);这一句代码放到100%{}中，看看实际效果如何？

animation-name:mytranslate;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;  /*循环播放*/

在实际开发中，我们很少会使用动画效果的完整形式，都是采用下面这种简写形式：

animation:mytranslate 2s linear infinite;