animation-iteration-count: infinite 不生效的主因是未设置 animation-duration 或关键帧无变化；需确保时长非零、关键帧属性可动画化且不同，并注意 IE 兼容性及 JS 动态修改的边界行为。
animation-iteration-count: infinite 为什么有时不生效
直接写 animation-iteration-count: infinite 理论上就能无限循环，但实际常遇到动画播完一次就停——根本原因是没配 animation-duration 或 animation-timing-function 导致浏览器无法计算播放节奏。另外，若动画关键帧（@keyframes）里只定义了 0% 和 100% 且属性值相同（比如都是 transform: translateX(0)），浏览器会判定“无变化”，直接跳过播放。
- 必须显式声明
animation-duration，哪怕只是0.01s -
animation-timing-function建议设为linear或ease-in-out，避免step-start类函数导致视觉卡顿 - 检查
@keyframes中至少有两个不同状态的关键帧，且属性可被动画化（如opacity、transform可，display不可）
用 animation-iteration-count 实现“播放 N 次后暂停”
当需要精确控制循环次数（比如 3 次后停止），animation-iteration-count: 3 是最直接方式。但它有个隐含行为：最后一次播放结束后，元素会**保持末帧样式**（即 100% 关键帧的状态），而不是回退到初始态。
- 若想播完 N 次后回到起点，需在
@keyframes的100%帧中还原初始值（例如从rotate(360deg)回到rotate(0)） - 配合
animation-fill-mode: forwards可强制保留末帧；若不加此属性，动画结束后会恢复初始样式（取决于是否设了forwards或both） - 注意：IE10+ 支持
infinite，但 IE 仅支持数值，不支持字符串"infinite"（必须写数字或关键字infinite，不能加引号）
替代方案：用 animation-direction 配合 infinite 实现往复动画
单纯 infinite 是单向重复，要实现“来回动”（比如呼吸缩放、左右摇摆），得靠 animation-direction: alternate。它会让偶数次循环反向播放，和 infinite 组合后形成无缝往复效果。
-
animation-direction: alternate必须和animation-iteration-count: infinite同时使用才有效 - 若用
alternate-reverse，第一次播放就是反向的（从100%到0%），适合需要“先收再放”的场景 - 注意性能：频繁触发
transform+opacity的 infinite 动画可能在低端设备上掉帧，建议加will-change: transform提前提示渲染层
JavaScript 控制 animation-iteration-count 的边界情况
通过 JS 动态改 style.animationIterationCount 能实时启停循环，但有坑：若在动画进行中把值从 infinite 改成 1，当前循环不会中断，而是播完这次才停；反过来，从 1 改成 infinite，下一次才会开始循环。
- 安全做法是先
animation-play-state: paused，再改iteration-count，最后play - 监听
animationiteration事件可捕获每次循环结束（但infinite下会持续触发，记得用标志位防重复逻辑） - CSS 自定义属性（
--loop-count）无法直接绑定到animation-iteration-count，需用 JS 同步更新style
真正让 infinite 可靠跑起来的，不是多写一行代码，而是确认关键帧有变化、时长不为零、且没被其他 CSS 规则意外覆盖。动画停在半路，八成是其中一环断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
