CSS animation-iteration-count 语法
在 CSS 中，animation-iteration-count 属性用于定义动画的播放次数。
语法：
animation-iteration-count: 数值 | infinite;说明：
animation-iteration-count 取值有以下 2 种：
数值：一个非负的数值（可以包含小数），表示动画播放的次数。例如 1 表示播放 1 次，0.5 表示播放半次（动画只播放一半，然后停止）。如果指定 0，动画不会播放。infinite：表示动画无限次重复播放。
当 animation-name 属性指定多个动画时，animation-iteration-count 属性也应提供对应数量的迭代次数值，用逗号分隔。这些值会按顺序与 animation-name 中的动画一一对应。
/* 应用多个动画，并指定各自的迭代次数 */
.element {
animation-name: slideIn, fadeIn;
animation-duration: 1s, 2s;
animation-iteration-count: 2, infinite; /* slideIn 播放 2 次，fadeIn 无限循环 */
}提示: animation-iteration-count 属性适用于所有元素，包括伪元素（::before, ::after）。
CSS animation-iteration-count 摘要
| 属于 | CSS 动画 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 1 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS animation-iteration-count 示例
接下来，我们通过几个简单的例子来讲解一下 animation-iteration-count 属性是如何使用的。
示例：animation-iteration-count 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes mytranslate {
0% {}
100% { transform: translateX(260px); }
}
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
animation-name: mytranslate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite; /* 无限循环播放 */
}
.container {
display: inline-block;
width: 300px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
这里定义 animation-iteration-count 属性值为 infinite。当打开页面时动画会自动播放，并且会无限循环播放。
animation-name: mytranslate;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;实际上，上面代码可以简写为下面一行代码。
animation: mytranslate linear 2s infinite;animation 是一个复合属性
在 CSS 中，animation 是一个复合属性，它包含以下子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| animation-name | 定义要应用的动画名称 |
| animation-duration | 定义动画的持续时间 |
| animation-timing-function | 定义动画的速度曲线 |
| animation-delay | 定义动画的延迟时间 |
| animation-iteration-count | 定义动画的重复次数 |
| animation-direction | 定义动画的方向 |
| animation-play-state | 定义动画的播放状态（运行或暂停） |
| animation-fill-mode | 定义动画在播放之前和之后如何应用样式到元素 |
