使用animation-iteration-count属性控制css动画重复次数，可设为数字或infinite实现循环；配合animation-direction可定义播放方向，如alternate实现来回滑动，常用于加载动画等场景。
在CSS中，控制动画重复次数使用 animation-iteration-count 属性。这个属性定义了动画应该播放多少次。
基本语法
animation-iteration-count 的常见取值包括：
- 数字：指定动画播放的具体次数，比如 1、2、3 等。
- infinite：让动画无限循环播放。
示例：
.element { animation-name: slide; animation-duration: 2s; animation-iteration-count: 3; /* 动画播放3次 */ }
设置无限循环
如果希望动画一直播放，比如加载动画或轮播效果，可以设为 infinite：
立即学习“前端免费学习笔记（深入）”；
.loading-spinner { animation: spin 1s linear infinite; }
这样动画会持续不断地运行，直到元素被移除或动画被停止。
结合 animation-direction 使用
当动画重复时，可配合 animation-direction 控制播放方向：
- normal：每次从头开始播放。
- alternate：奇数次正向播放，偶数次反向播放。
例如实现来回滑动：
.slide-back-and-forth { animation: slide 1s ease-in-out 3 alternate; }
这段动画会播放3次，第1次正向，第2次反向，第3次又正向（因为是奇数次）。
实际应用建议
在使用 animation-iteration-count 时注意：
- 默认值是 1，即动画只播放一次。
- 小数也合法，如 2.5 表示播放2次完整动画加一半。
- 与 animation-fill-mode 配合使用，可控制动画结束后元素的状态。
基本上就这些，合理设置重复次数能让页面动效更自然流畅。