CSS 属性animation-iteration-count 指定动画序列在停止之前应运行多少个周期。
简写属性 animation 是同时定义所有动画相关属性的便捷方法。
animation-iteration-count 属性接受用逗号分隔的多个值。
属性值
CSS属性animation-iteration-count被定义为一个或多个以逗号分隔的值，可以是以下值之一:
infinite: 动画将无限期地继续而不停止。
<number>: 默认情况下，动画重复一次，由animation-iteration 定义-计数财产。您可以指定非整数值（例如 0.5）来播放动画循环的部分部分。负值对此属性无效。
注意:当在animation-*属性上指定多个逗号分隔值时，值按照动画名称出现的顺序应用于动画。
注意:在定义 CSS 滚动驱动动画时， animation-iteration-count 确定动画在时间轴进度过程中重复的次数。如果没有为animation-iteration-count指定值，则动画仅执行一次。 infinte 是一个有效值，但在 CSS 滚动驱动动画的情况下可能会导致动画无法工作。
语法
/* 关键字*/
animation-iteration-count = infinte;
/* <number> */
animation-iteration-count = 4;
animation-iteration-count = 3.2;
/* 多个值 */
animation-iteration-count = 4, 0, infinite; 适用范围
所有 HTML 元素，::before 和 ::after 伪元素。
CSS animation-iteration-count: 关键字值
在此示例中，属性animation-iteration-count设置为infinte，这将动画序列的重复次数定义为无限。
该属性指定动画序列的迭代次数。动画在停止之前会一直运行。
在此示例中，盒子元素根据动画的指定迭代次数无限垂直上下移动。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.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>
<div class="box">Animation Iteration Count</div>
</body>
</html> CSS animation-iteration-count: <number> 值
在此示例中，属性动画迭代计数为设置为 2，定义动画序列的重复次数。
此属性指定动画在停止之前运行的迭代次数。
在本例中，盒子元素根据指定的动画迭代次数垂直上下移动两次。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
font-size: 20px;
background-color: #3498db;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 2;
}
@keyframes slide {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box">Animation Iteration Count</div>
</body>
</html> CSS animation- iteration-count: 多个值
在此示例中，属性animation-iteration-count设置为多个值，即4和2，它定义了动画序列首先重复四次，然后重复两次。
此属性指定动画在停止之前运行的迭代次数。
在此示例中，盒子元素根据指定的动画迭代次数垂直上下移动。
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
font-size: 20px;
background-color: #3498db;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 4, 2;
}
@keyframes slide {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box">Animation Iteration Count</div>
</body>
</html>