在CSS动画开发中，控制动画的播放次数是一个常见需求，无论是需要动画只执行一次、无限循环还是指定具体次数，都可以通过animation-iteration-count属性实现。该属性属于CSS动画模块的核心属性之一，配合animation-name、animation-duration等属性可以灵活调整动画的播放行为。
animation-iteration-count属性基础介绍
animation-iteration-count属性用于定义动画的播放次数，其取值可以是具体的数值，也可以是关键字infinite表示无限循环。该属性可以作用于所有支持CSS动画的元素，包括普通块级元素、行内元素以及伪元素。
属性语法
该属性的标准语法格式如下：
/* 基础语法 */ animation-iteration-count: <number>|infinite; /* 多动画场景下的写法 */ animation-iteration-count: <number> [, <number>]*;
其中<number>为非负数字，默认值为1，表示动画只播放一次。如果取值为0，则动画不会播放。infinite关键字表示动画会无限次循环播放。
核心取值说明
- 具体数字：比如1、2、3.5等，支持小数，小数部分表示播放到动画对应进度的位置停止，例如取值2.5表示动画完整播放2次后，再播放到第3次的一半位置停止。
- infinite：表示动画无限循环，直到元素被移除或者动画被其他样式覆盖才会停止。
实际应用场景与代码示例
下面通过几个常见的开发场景，演示animation-iteration-count属性的实际应用方式。
场景1：元素加载动画只播放一次
很多页面的加载提示动画只需要在页面加载完成后播放一次即可，此时可以将animation-iteration-count设置为1（默认值，也可以显式声明）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单次播放动画示例</title>
<style>
.loading {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
/* 定义动画名称、时长、播放次数 */
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 1; /* 显式声明只播放一次 */
animation-timing-function: linear;
}
/* 定义旋转动画 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
场景2：呼吸灯效果无限循环
呼吸灯效果需要元素持续进行透明度变化，此时需要使用infinite取值让动画无限循环。
/* 呼吸灯元素样式 */
.breath-light {
width: 20px;
height: 20px;
background-color: #ff4d4f;
border-radius: 50%;
animation-name: breath;
animation-duration: 2s;
animation-iteration-count: infinite; /* 无限循环 */
animation-timing-function: ease-in-out;
}
/* 呼吸动画：透明度从1到0.3再回到1 */
@keyframes breath {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
场景3：多动画不同播放次数
如果一个元素同时应用了多个动画，可以给animation-iteration-count传递多个值，分别对应每个动画的播放次数。
.multi-animation {
width: 100px;
height: 100px;
background-color: #1890ff;
/* 同时应用移动和旋转两个动画 */
animation-name: move, rotate;
animation-duration: 2s, 1s;
/* 移动动画播放3次，旋转动画无限循环 */
animation-iteration-count: 3, infinite;
}
/* 水平移动动画 */
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
/* 旋转动画 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
注意事项
- animation-iteration-count的取值不支持负数，如果设置为负数，浏览器会按照默认值1处理。
- 当动画设置了animation-fill-mode为forwards时，动画播放结束后的状态会保留，此时播放次数设置为具体数字，动画结束后会停留在最后一帧的状态。
- 如果通过JavaScript动态修改animation-iteration-count的值，修改后的属性会立即生效，当前正在播放的动画会按照新的次数规则继续执行。
掌握animation-iteration-count属性的使用方法，可以帮助开发者灵活控制CSS动画的播放行为，满足不同场景下的动画需求，提升页面的交互效果和用户体验。
CSS动画animation-iteration-count动画播放次数前端样式修改时间：2026-06-10 12:33:50