animation-iteration-count 无效最常见原因是 animation-name 与 @keyframes 名称不一致或选择器未匹配元素；其次为动画未真正触发，如 display:none、visibility:hidden、关键帧无变化或父容器裁剪导致首帧不可见。
animation-iteration-count 设为数字或 infinite 就该生效，但没反应？
最常见原因是动画本身没真正“播放起来”——animation-name 指向的 @keyframes 名称拼写不一致，或 CSS 选择器根本没匹配到元素。浏览器遇到无效的 @keyframes 名称时不会报错，只会静默忽略整个动画声明。
检查步骤：
- 确认
@keyframes名称和animation-name值完全一致（区分大小写、空格、连字符） - 用开发者工具的“动画”面板（Elements → Styles → Animation）看该元素是否列出了动画条目；若为空，说明动画未被识别
- 确保元素有非
none的display值，且未被visibility: hidden或opacity: 0误判为“不可见而跳过首帧”
设了 animation-iteration-count: 3 却只播了 1 次？
本质是动画触发时机问题：CSS 动画默认只在样式首次计算/应用时启动，后续修改 animation-iteration-count 不会重置或重启动画。如果你是在 JS 中动态改这个值，它不会让已结束的动画“复活”。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 想重播多次，得先移除动画再重新添加——例如切换一个 class：
element.classList.remove('animated'); void element.offsetWidth; element.classList.add('animated'); - 或者用
animation-play-state: paused+running配合重置，但注意这不会重置迭代计数器 - 真要 JS 控制次数，建议用
animationend事件监听，手动计数并在第 3 次后remove动画类
用了 infinite 却卡在第一帧不动？
不是循环失效，而是动画关键帧定义有问题。典型情况是 @keyframes 里只有 from（或 0%），没有 to（或 100%），或两个状态完全相同（比如都设 transform: translateX(0)），导致浏览器认为“无需变化”，直接跳过过渡。
快速验证：
- 把
to改成明显不同的值，比如transform: translateX(100px) - 确保至少有一个属性在起止帧之间存在可动画化的变化（颜色、尺寸、位移、透明度等）
- 避免在
@keyframes中使用无法动画的属性（如display、z-index）
动画循环中想控制暂停/继续，但 animation-play-state 不起作用？
这个属性只对“正在运行”的动画有效；如果动画已自然结束（比如 iteration-count: 2 已播完），再设 running 也不会重启。而且它不能改变已设定的循环次数，只是暂停/恢复当前周期。
注意点：
-
animation-play-state是独立于iteration-count的控制维度，两者不互相覆盖 - 想实现“播 3 次后暂停，点击再续播 2 次”，必须用 JS 记录已播次数，并动态更新
animation简写属性（含新的iteration-count） - 不要依赖
play-state来“延长”总循环数，它只管当前这一轮
最容易被忽略的是：动画是否真的被浏览器视为“可触发”——比如父容器 overflow: hidden 裁剪了动画区域，或元素处于 transform: scale(0) 状态下首次渲染，导致首帧不可见从而不启动动画。这类问题不会报错，但会让所有 iteration 设置形同虚设。
