animation-iteration-count: infinite 必须显式声明，其默认值为1；漏写、引号误用、简写顺序错误（应为第5个参数）均导致循环失效；首尾状态不一致会跳帧，可统一首尾值或用alternate方向；兼容旧版需手动添加-webkit前缀。
animation-iteration-count: infinite 必须显式声明，不能省略
动画默认只播一次，animation-iteration-count 的默认值就是 1，不写就等于关掉了循环。很多人写了 @keyframes 和 animation-name，却没加这一句，结果动画播完就停——不是代码失效，是根本没配对。
常见错误包括：
- 漏写
animation-iteration-count: infinite，只靠animation简写里没包含它（比如写成animation: slide 2s ease;） - 误写成字符串：
animation-iteration-count: "infinite";（实际是关键字，不能加引号） - 在简写中顺序错乱，导致该值被覆盖或忽略（
animation多值时，iteration-count是第5个位置）
只设 infinite 不够，首尾状态不一致会“跳帧”
单纯加 infinite 后，动画每次循环都从 0% 关键帧重新开始。如果末尾（100%）和开头（0%）的样式不同，人眼会看到明显“闪回”或“重置”，比如 transform: translateX(0) → translateX(100px)，循环时会瞬间弹回左端。
解决方式有两类：
- 让首尾状态一致：例如旋转动画用
0% { transform: rotate(0deg); }，100% { transform: rotate(360deg); } - 用
animation-direction: alternate让偶数次反向播放，视觉更平滑；或搭配animation-fill-mode: forwards锁定结束态（但注意这会影响循环逻辑，慎用）
animation 简写中设置 infinite 要注意参数顺序
animation 是复合属性，完整语法为：animation: <name><duration><timing-function><delay><iteration-count><direction><fill-mode><play-state>;</play-state></fill-mode></direction></iteration-count></delay></timing-function></duration></name>
其中 iteration-count 是第5个参数，容易被忽略或错位。例如：
animation: bounce 1.5s ease-in 0.2s infinite;
✅ 正确：第5项是 infinite
❌ 错误：animation: bounce 1.5s infinite ease-in; —— 这里 infinite 被当成了 timing-function，浏览器会忽略或报无效值
建议：复杂动画优先拆开写子属性，避免简写歧义；简单场景用简写时，严格按顺序核对位置。
兼容性细节：老版本 Safari/Chrome 需要 -webkit- 前缀
虽然现代浏览器已全面支持无前缀的 animation-iteration-count，但如果你的项目仍需兼容 Safari 9、iOS 8 或 Chrome 9 及更早版本，必须加 -webkit-animation-iteration-count。
典型写法：
div {
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
注意两点：
-
-webkit-前缀只对 Safari ≤ 9、Chrome ≤ 9、Android ≤ 4.4.4 有效；新版本反而可能因重复声明引发意外行为 - 不要只写前缀版而漏掉标准版，否则新版浏览器会完全忽略该规则
真正容易被忽略的是：即使你用了 Autoprefixer，它默认不处理 animation-iteration-count 的前缀补全——这个属性得手动加，或确认你的构建配置启用了对应选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
