animation-iteration-count设为infinite可实现css动画无限循环，但需注意其非默认值、不可加引号，并配合animation-direction:alternate或首尾状态一致等方案避免跳帧。
animation-iteration-count 设为 infinite 就能循环
想让 CSS 动画不停重复，关键就是把 animation-iteration-count 设成 infinite。它不是默认值，不写就只播一次——这点很多人栽在第一步。
常见错误是只写了 @keyframes 和 animation-name，漏掉这个属性，或者误写成字符串 "infinite"（实际是关键字，不用引号）。
-
animation-iteration-count: 1：默认值，播一次就停 -
animation-iteration-count: infinite：无限循环，注意没有引号 -
animation-iteration-count: 3：明确播 3 次，数值类型，不支持小数
循环动画必须配 animation-direction 或 animation-fill-mode 才自然
单纯设 infinite 容易卡顿或跳帧——因为每次循环都从头开始，如果动画末尾状态和初始状态不一致，人眼会看到“闪回”。比如一个 transform: translateX(0) → translateX(100px) 的平移，循环时会瞬间跳回起点。
解决方法看需求选其一：
- 加
animation-direction: alternate：奇数次正向、偶数次反向，适合呼吸、摆动类效果 - 加
animation-fill-mode: forwards：保持最后一帧样式，但仅对单次有效；循环时无效，所以得配合alternate或重置 keyframes - 更稳妥的是在
@keyframes里让首尾状态一致，比如用opacity而非位移做淡入淡出
animation-iteration-count 和 JavaScript 控制的冲突点
用 JS 动态改 element.style.animationIterationCount = 'infinite' 是可行的，但要注意：如果之前用 CSS 类设置了该属性，内联样式会覆盖，但一旦类名被移除或重置，内联值不会自动消失，可能造成意外交互。
更麻烦的是，某些浏览器（如旧版 Safari）对 animationiteration 事件监听不稳，尤其在快速 toggle 动画时，infinite 下该事件不会触发——别指望靠它做循环计数。
- 需要精确控制第 N 次循环？别依赖
animationiteration，改用setInterval+ 时间戳模拟 - 想暂停/恢复循环动画？优先用
animation-play-state: paused / running，比删 class 更可靠 - 服务端渲染或 SSR 场景下，
infinite动画可能在首屏闪一下再启，建议加animation-delay: 0.01s错开渲染时机
移动端兼容性没大问题，但性能要盯住 transform 和 opacity
animation-iteration-count: infinite 在 iOS 10+、Android Chrome 45+ 都支持良好，真正卡脖子的是动画本身。循环放着不动的 width、height 或 color 会强制重排重绘，掉帧明显。
- 只对
transform和opacity做无限动画，GPU 加速才生效 - 避免在循环动画里读取
offsetTop或触发getComputedStyle，容易引发布局抖动 - 真要调试，用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，看是否意外重绘
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
