animation-iteration-count 设置多少次才算“只播一次”
默认就是 1，不是 0 或 infinite。设成 0 会直接禁用动画——它不会播放，连第一帧都不会触发（animation-fill-mode 也无效）。真要“只播一次”，写 1 最稳妥。
-
1：标准单次播放，结束后停在最后一帧（受animation-fill-mode影响） -
0：动画被跳过，元素保持初始状态，CSS 动画生命周期不启动 -
infinite：无限循环，但注意：若动画时长为0s，浏览器可能忽略该声明或行为不一致
想播 2.5 次？可以，但要注意截断逻辑
CSS 允许小数，比如 2.5，意思是完整播 2 遍，第 3 遍只播到一半。关键点在于：**截断发生在动画时间轴上，不是关键帧上**。也就是说，如果动画总时长是 2s，animation-iteration-count: 2.5 实际运行时间为 5s，第 5s 时停在 50% 关键帧对应的状态。
- 小数只影响播放时长，不影响关键帧插值精度
- 不能靠它“停在某个具体关键帧”，比如想停在
@keyframes里的70%，得手动算时长比例 - IE 不支持小数值，会向下取整（
2.9→2），需实测
和 animation-direction 搭配时，iteration-count 怎么数
animation-iteration-count 数的是“迭代次数”，不是“正向次数”。当 animation-direction 是 alternate 时，第 1 次正向、第 2 次反向、第 3 次正向……都各算 1 次。例如 animation-iteration-count: 3; animation-direction: alternate; 就是：正→反→正，共 3 次，最终停在正向的终点。
-
alternate-reverse同理，只是起始方向相反 - 别误以为
alternate下2次就等于来回一趟——它就是 2 次独立迭代 - 若需严格控制“来回一趟”为 1 次，应改用
normal+ 手动写反向关键帧，再设iteration-count: 1
JavaScript 动态改 iteration-count 为什么有时没反应
直接改 element.style.animationIterationCount 是有效的，但常见失效原因是：动画已结束且未设置 animation-fill-mode，此时浏览器可能已卸载动画上下文。更可靠的做法是先重置动画，再更新：
立即学习“前端免费学习笔记（深入）”；
element.style.animation = 'none'; // 强制中断 void element.offsetWidth; // 触发重排，确保中断生效 element.style.animation = 'slide 1s ease-in-out 2'; // 重新挂载，含新 iteration-count
- 仅修改
animation-iteration-count而不碰其他属性，在某些浏览器中可能被忽略（尤其动画处于 idle 状态） - 使用
getComputedStyle读取当前值时，返回的是解析后数值（如"2"），但设为"2"字符串或数字都行 - 若用 CSS-in-JS 库（如 Emotion），注意其内联样式优先级是否覆盖了原有动画声明
animation-fill-mode、手动重置或 JS 监听 animationend 来收尾。 
