animation-iteration-count 控制CSS动画播放次数，取值为数字或infinite，不支持小数/负数；需配合animation-fill-mode避免闪回，JS无法动态修改该属性来重播动画。
animation-iteration-count 控制播放次数
CSS 动画的播放次数由 animation-iteration-count 决定，它不是“开关”或“触发器”，而是一个纯数值控制属性。设为 1 就播一次，infinite 就无限循环——没有中间态（比如“播 2.5 次”不被支持）。
常见误用是把它和 animation-play-state 或 animation-direction 混淆：后者管暂停/方向，前者才管“总共播几遍”。
-
animation-iteration-count: 1：默认值，只执行一遍，结束后停留在最后一帧（除非另有animation-fill-mode设置） -
animation-iteration-count: 3：严格执行 3 次，第 3 次结束时停在动画末尾状态 -
animation-iteration-count: infinite：无限循环，不会自动停止，需靠 JS 控制或用户交互中断 - 不支持小数、负数、百分比；
0等效于1（规范定义中0被视为无效值，浏览器按1处理）
配合 animation-fill-mode 避免“闪回”问题
当 animation-iteration-count 为有限值（如 2）时，动画结束后元素会“跳回”初始样式——这不是 bug，而是默认行为。想让它停在最后一帧？必须显式设置 animation-fill-mode。
典型错误写法：
div {
animation: slide 1s;
animation-iteration-count: 2;
/* 缺少 fill-mode → 动画播完直接回退到未动画前的状态 */
}
正确写法：
div {
animation: slide 1s;
animation-iteration-count: 2;
animation-fill-mode: forwards; /* 关键：保持最后一帧样式 */
}
-
forwards：动画结束后保留最后一帧的 CSS 属性值 -
backwards：动画开始前（延迟期间）应用第一帧样式（常配合animation-delay） -
both：等价于forwards+backwards - 单独设
animation-fill-mode不生效，必须和animation-name同时存在
JS 动态修改次数的限制与替代方案
不能通过 JS 直接改 animation-iteration-count 来“中途加播一次”，因为该属性不触发动画重放——它只在动画首次启动时读取。运行中修改它，浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
真正可行的做法只有两种：
- 移除再重设整个
animation属性（含名称、时长、次数），强制浏览器重新解析并触发新动画 - 用
animation-play-state: paused+animation-play-state: running控制暂停/继续，但无法改变总次数 - 更灵活的替代：用
@keyframes定义多段逻辑，或改用requestAnimationFrame手写控制（适合需要精确帧数或条件终止的场景）
例如重播动画：
element.style.animation = 'none'; // 强制重排，清空动画状态 void element.offsetWidth; element.style.animation = 'slide 1s 2 forwards';
兼容性与真·“次数”的边界情况
animation-iteration-count 在所有现代浏览器中完全支持（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+），但要注意两个易忽略的细节：
- IE 完全不支持 CSS 动画整套语法，包括此属性；若需兼容，只能降级为 JS 或 transition 方案
- 当动画时长为
0s时，无论iteration-count设多少，都只执行一次（浏览器视其为瞬时样式变更） - 多个动画同时作用于同一元素时，每个动画独立计算自己的
iteration-count，互不影响
最常被漏掉的是：动画是否“算作一次”，取决于 @keyframes 中是否包含实际样式变化。如果所有关键帧的属性值完全一致，那无论设多少次，都看不到效果——次数没少，只是没变化。
