animation-iteration-count: infinite 能实现无限循环，但必须满足硬性条件：animation-duration 非零、@keyframes 起止帧属性值不同且可动画、animation-name 严格匹配、避免简写覆盖；否则动画仅播一次。
animation-iteration-count: infinite 就是让 CSS 动画无限循环的唯一标准写法，但它不是“设了就动”，必须满足几个硬性条件，否则动画播完一次就停——这不是 bug，是浏览器按规范执行的结果。
为什么 animation-iteration-count: infinite 不生效
最常见的失效场景，根本不是属性写错了，而是动画本身“没资格播第二次”：
-
animation-duration没设，或被设为0s（哪怕只漏写这一项，浏览器就当“无时长”，直接跳过播放） - @keyframes 里只有
0%和100%，且两帧的可动画属性值完全相同（比如都是transform: translateX(0)），浏览器判定“无变化”，不触发动画 - 关键帧中用了不可动画化的属性（如
display、height配合auto、font-size在某些上下文中） - 用简写
animation覆盖了之前单独声明的animation-iteration-count（例如先写了animation-iteration-count: infinite，后面又写animation: slide 2s;，后者会重置所有子属性，包括 iteration-count 回默认值1）
必须配对的三个基础属性
单独写 animation-iteration-count: infinite 几乎必然失败。它必须和另外两个属性共存才能形成有效动画链：
-
animation-name：必须与 @keyframes 名称**严格一致**（区分大小写，不能多空格、不能拼错） -
animation-duration：必须是非零值，建议显式写成0.01s起步，避免0s或省略 -
animation-timing-function：推荐用linear或ease-in-out；避免step-start类函数，它们会让无限循环看起来像卡顿或跳变
更稳妥的做法是直接用简写：animation: spin 1.5s linear infinite;——这样四者（name / duration / timing-function / iteration-count）一次声明，不会被覆盖。
循环时“闪回”或“跳帧”的真实原因
动画播完一圈后突然回到起点，不是 infinite 失效，而是首尾状态不一致导致的视觉中断：
- 比如
@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }，每次循环都会从100px瞬间跳回0 -
animation-fill-mode: forwards对无限循环无效（它只影响最后一次播放结束后的保持），所以不能靠它解决 - 真正有效的解法只有两个：
animation-direction: alternate（来回播，适合呼吸、摇摆），或在 keyframes 里让100%帧还原初始状态（比如加一帧99% { transform: translateX(100px); } 100% { transform: translateX(0); }）
容易被忽略的兼容性与运行时陷阱
即使代码全对，上线后也可能出问题：
- IE10+ 支持
infinite，但 IE9 及更早版本**完全不支持**该关键字，且不支持数值以外的任何值；写成"infinite"（带引号）在所有浏览器都会失效 - 用 JavaScript 动态改
element.style.animationIterationCount = 'infinite'是可行的，但如果在动画进行中把值从infinite改成1，浏览器不会“优雅停止”，而是立刻终止当前迭代并跳到末帧 - React/Vue 中频繁 toggle 动画 class，会导致 animation 重流（re-flow），看似“循环中断”，实则是浏览器重建动画实例，需用
key或animation-play-state控制启停，而非反复增删 class
最隐蔽的问题往往不在写法，而在动画是否真正在渲染层持续运行——如果元素被 overflow: hidden 裁剪、或父容器 visibility: hidden、或自身 opacity: 0，动画仍在计时，但你看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
