设 animation-iteration-count 为 infinite 即可实现无限循环，需配合 animation-duration 使用，推荐用 animation 简写一次性声明（如 animation: spin 1.5s linear infinite），注意顺序与大小写，并优先使用 transform/opacity 避免卡顿。
animation-iteration-count 设为 infinite 就行
CSS 动画默认只播一次，想无限循环，关键就是改 animation-iteration-count 这个属性。它控制动画播放次数，设成 infinite 就能一直播下去——不是靠 JS 轮询，也不是靠重复写 keyframes，纯 CSS 原生支持。
常见错误是写成 animation-iteration-count: 0 或 animation-iteration-count: -1，这两个值都不合法，浏览器会直接忽略该声明，退回到默认的 1 次。
-
animation-iteration-count: infinite是唯一标准写法，大小写敏感，不能写成Infinite或INFINITE - 如果同时用了
animation-direction: alternate，无限循环时会来回播（正向→反向→正向…），注意视觉节奏是否符合预期 - 别漏掉
animation-duration，否则即使设了infinite，动画也因时长为 0 而“瞬间完成”，看起来像没动
用 animation 属性一次性写全更稳妥
单独写 animation-iteration-count 容易被后续的简写 animation 覆盖。比如你先设了 animation-iteration-count: infinite，后面又写了 animation: slide 2s ease;，整个动画配置会被重置，iteration-count 回归默认值 1。
推荐一开始就用完整简写，把所有关键参数拢在一起：
立即学习“前端免费学习笔记（深入）”；
div {
animation: spin 1.5s linear infinite;
}
这里 infinite 是 animation 简写的最后一个值，对应 animation-iteration-count。顺序不能乱：时长、timing-function、延迟、迭代次数、方向、填充模式。
- 简写中省略某项（比如没写
infinite），那一项就按默认值处理，iteration-count默认就是1 - 如果要用
animation-fill-mode，必须放在infinite后面，例如：animation: fade 0.3s forwards infinite; - Chrome 和 Safari 对简写解析较严格，Firefox 相对宽容，但统一写法能避免跨浏览器差异
无限动画卡顿？检查 will-change 和硬件加速
无限播放的动画如果涉及 left、top 这类触发重排的属性，或者大量 DOM 元素同时在播，很容易掉帧。这不是 infinite 的问题，而是渲染路径太重。
优先用 transform 和 opacity 做动画，它们走合成层，GPU 加速效果好。再加一层 will-change: transform 提前提示浏览器：“这个元素要动”，让合成器早做准备。
- 别对
display、height、margin等触发 layout 的属性设无限动画 -
will-change不是万能药，滥用反而增加内存开销，只加在真正持续运动的元素上 - 用 Chrome DevTools 的 Rendering 面板勾选 “FPS Meter”，实时看帧率；动画卡顿时，点开 Layers 面板确认是否进了独立图层
想暂停或动态控制？别删 infinite，用 animation-play-state
有人想“暂停无限动画”，第一反应是把 infinite 改成具体数字，再用 JS 控制播放次数。这不对——每次改 animation-iteration-count 都会重置动画状态，从头开始。
正确做法是保持 infinite，用 animation-play-state 切换 running / paused：
button:hover + .spinner {
animation-play-state: paused;
}
-
animation-play-state是可继承、可过渡的，适合 hover、focus、JS toggle 场景 - 注意：它只暂停当前帧，恢复时从暂停处继续，不是重播
- 如果动画本身有
animation-delay，暂停后再恢复，delay 不会重新计算——这点容易误判行为
infinite 本身，而在配套属性和渲染策略没对齐。 
