使用animation-iteration-count属性控制CSS动画重复次数，可设为数字或infinite实现循环；配合animation-direction可定义播放方向，如alternate实现来回滑动，常用于加载动画等场景。
在CSS中，控制动画重复次数使用
animation-iteration-count
属性。这个属性定义了动画应该播放多少次。
基本语法
animation-iteration-count 的常见取值包括：
数字
：指定动画播放的具体次数，比如 1、2、3 等。
infinite
：让动画无限循环播放。
示例：
设置无限循环
如果希望动画一直播放，比如加载动画或轮播效果，可以设为 infinite：
立即学习
“
前端免费学习笔记（深入）
”；
这样动画会持续不断地运行，直到元素被移除或动画被停止。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
结合 animation-direction 使用
当动画重复时，可配合
animation-direction
控制播放方向：
normal
：每次从头开始播放。
alternate
：奇数次正向播放，偶数次反向播放。
例如实现来回滑动：
这段动画会播放3次，第1次正向，第2次反向，第3次又正向（因为是奇数次）。
实际应用建议
在使用 animation-iteration-count 时注意：
默认值是
1
，即动画只播放一次。
小数也合法，如 2.5 表示播放2次完整动画加一半。
与 animation-fill-mode 配合使用，可控制动画结束后元素的状态。
基本上就这些，合理设置重复次数能让页面动效更自然流畅。
.element {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 3; /* 动画播放3次 */
}
.loading-spinner {
animation: spin 1s linear infinite;
}
.slide-back-and-forth {
animation: slide 1s ease-in-out 3 alternate;
}