1. animation-iteration-count 的基础与工作原理
语义与取值
在 CSS 动画中，animation-iteration-count 用来控制动画循环的次数。它的默认值是 1，意味着动画从开始到结束只执行一次。使用 infinite 可以让动画无限循环，直到被暂停或样式被覆盖。对于需要有限循环的场景，设置一个正整数 n 就等同于执行 n 个完整周期。
需要注意的是，animation-iteration-count 与 animation-name、animation-duration、以及 timing-function 等属性共同决定动画的表现方式。仅改变 iteration-count 并不会改变单次循环的时长，除非同时调整 animation-duration。
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(200px); } }
.box { animation-name: slide; animation-duration: 2s; animation-iteration-count: 3; }语法与取值类型
可以直接对单个属性设置，也可以在简写形式中组合。例如，animation-iteration-count 可与其他长hand 属性组合也可使用简写 animation。在现代浏览器中，整数和 infinite 两种取值是最常见的选择。
对于兼容性，确保在需要时同时包含前缀版本，如 -webkit-animation-iteration-count，以覆盖某些旧版 Safari/Chrome 的实现差异。
.box { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; }
.box { animation: slide 2s 3; /* 等同于 3 次完整循环 */ }2. 兼容性与前缀注意事项
标准语法与前缀兼容
在现如今的主流浏览器中，animation-iteration-count 的标准语法得到了广泛支持，但对 -webkit- 前缀的支持可能在某些历史版本中仍然存在。为保险起见，尽量同时声明 标准属性与 前缀属性，确保老旧环境也能正确解析。
示例中，结合使用两者，既能保持现代实现的简洁，也兼顾向后兼容性。请注意，前缀属性主要用于关键字或动效的早期实现，而最新浏览器通常只需要标准属性即可。
.box { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; }结合简写属性的正确用法
使用长hand 属性比简写形式更清晰，优先推荐写出 animation-name、animation-duration、animation-iteration-count 等逐项属性，便于调试和维护。若要使用简写，务必确保名称、时长、次数的顺序与语义明确。
下面的示例展示了利用简写写法将同一动效设定在一个属性中，iteration-count 同样生效，且保留了可读性。
.box { animation: slide 2s infinite ease-in-out; }3. 实践应用案例与动效设计
常见场景与动画组合
在实际界面中，animation-iteration-count 常用于实现重复的视觉提示，如指示器、轮播过渡、加载进度等场景。将 infinite 与适当的 delay、timing-function 结合，可以实现无缝循环的视觉效果。
设计时应关注性能影响，避免在低端设备上长时间持续执行高频动画，必要时通过 prefers-reduced-motion 进行降级。
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.2); opacity: 0.6; } 100% { transform: scale(1); opacity: 0.0; } }
.indicator { width: 20px; height: 20px; background: #4a90e2; border-radius: 50%; animation: ping 1s infinite; }无障碍与用户偏好
为了不让动画干扰用户，prefers-reduced-motion 媒体查询提供了降级的方案：当用户偏好减少动效时，可以将动画改为静态或仅保留微小动画。此举不仅提升可访问性，也帮助实现对不同设备的统一体验。
示例中，通过在 CSS 中添加媒体查询实现：没有动画时页面仍然可用，且体验更友好。
@media (prefers-reduced-motion: reduce) { .indicator { animation: none; } }