CSS animation-iteration-count 属性指定动画在停止之前应运行多少个周期。
animation-iteration-count 属性接受用逗号分隔的多个值。
语法
animation-iteration-count : number|infinte|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| number | 这指定了动画必须运行的次数。默认值为 1。 |
| infinite | 此设置指定动画必须永远持续。 |
| initial | 此属性为其初始值。 |
| inherit | 这将继承父元素的属性。 |
CSS animation-iteration-count 属性示例
下面列出的示例将说明具有不同值的 animation-iteration-count 属性。
带数字的迭代计数
当将数字分配给 animation-iteration-count 属性时，相应的动画将播放多次。在以下示例中，动画将播放 3 次，因为为属性指定的值为 3。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
font-size: 20px;
background-color: #3498db;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 3;
}
@keyframes slide {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<h2>CSS Animation Iteration Count Property</h2>
<div class="box">Animation Iteration Count</div>
</body>
</html>
无限的迭代计数
当 animation-iteration-count 的值设置为无限时，动画将永远播放。在以下示例中，动画会继续播放，而不会出现任何中断。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
font-size: 20px;
background-color: #3498db;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes slide {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<h2>CSS Animation Iteration Count Property</h2>
<div class="box">Animation Iteration Count</div>
</body>
</html>
具有初始值的迭代计数
当 animation-iteration-count 的值设置为 initial，初始值（即 1）将设置为属性，因此动画仅播放一次。在以下示例中，动画仅播放一次。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 150px;
font-size: 20px;
background-color: #3498db;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: initial;
}
@keyframes slide {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<h2>CSS Animation Iteration Count Property</h2>
<div class="box">Animation Iteration Count</div>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
