animation-iteration-count: 3；需确保未被简写错位、引号包裹或覆盖，小数如2.5合法，0无效，多动画用逗号分隔，js修改不重播已运行动画。
直接写 animation-iteration-count: 3 这类数值即可，但必须确保它被真正生效——漏写、错位或被覆盖都会让它退回到默认的 1 次。
animation-iteration-count 数值写法与常见错误
它只接受数字（如 1、2.5）或 infinite，不支持字符串引号、负数、0 或百分比。写成 animation-iteration-count: "3" 或 animation-iteration-count: 'infinite' 都会失效。
-
2.5是合法的：播放完整两次，再执行前半段（到 50% 关键帧为止） -
0不被规范支持，多数浏览器按1处理 - 小数在简写中同样有效：
animation: float 1s ease 0s 2.5 - 多个动画时用逗号分隔：
animation-iteration-count: 2, infinite，对应两个animation-name
简写属性里 iteration-count 容易错位
animation 简写顺序固定，iteration-count 是第 5 个参数。写成 animation: spin 1s infinite 是错的——infinite 被当成了 animation-timing-function，实际循环次数仍是默认 1。
- 正确简写格式：
animation: spin 1s linear 0s infinite - 如果省略了
animation-delay（第 4 位），不能跳过它占位：animation: spin 1s linear infinite仍错，必须写animation: spin 1s linear 0s infinite - 用 CSS 自定义属性动态控制时，建议单独声明
animation-iteration-count，避免简写覆盖
数值循环结束后的状态容易被忽略
设为 3 后动画停在最后一帧，但这一帧未必是你想要的终态。比如一个 transform: translateX(0) → translateX(100px) 的动画，播完 3 次后元素会卡在 100px 位置，可能破坏布局。
- 用
animation-fill-mode: forwards可让最终帧样式保留，但它只作用于单次循环终点，对3次循环来说就是第 3 次的末尾帧 - 若需回归初始状态，得在
@keyframes里让首尾一致（如用opacity动画而非位移） - 想让第 3 次结束后“回弹”，得额外加一段过渡动画，不能靠
animation-iteration-count本身实现
JavaScript 动态改 iteration-count 的限制
能用 element.style.animationIterationCount = '3' 修改，但有硬性约束：
- 修改后不会重播动画——它只影响下一次触发，已运行中的动画不受影响
- 如果原样式是通过 class 设置的，内联设置会覆盖，但 class 移除后内联值不会自动清空
- 无法用
animationiteration事件监听“第 3 次结束”，因为该事件只在每次循环完成时触发，你得自己计数 - 真正想重播，得先
element.style.animation = 'none'强制重置，再恢复 animation 值
数值循环看着简单，真正落地时最常栽在简写顺序、首尾状态不一致和 JS 动态控制的预期偏差上——尤其是那个被当成 timing-function 的 infinite，查起来特别费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
