animation-iteration-count: infinite 不生效的常见原因包括：未设置 animation-duration、@keyframes 缺少 0%/100% 或二者相同、animation-fill-mode 未设为 forwards/both、animation-play-state: paused 或 will-change 导致异常，以及元素隐藏、js 重置动画或系统偏好 reduces motion。
animation-iteration-count: infinite 不生效的常见原因
直接写 animation-iteration-count: infinite 却没循环，大概率不是语法错，而是动画本身“播完了就停”——CSS 动画默认只在 animation-fill-mode 为 none（初始值）时，结束帧不保留，且若关键帧（@keyframes）里没定义明确的终点状态，浏览器可能提前终止动画逻辑。
- 检查是否遗漏
animation-duration：没有持续时间，infinite无意义，动画瞬间完成即停止 - 确认
@keyframes至少包含0%和100%，且二者不能完全相同（否则浏览器可能优化掉） - 避免与其他动画属性冲突，比如
animation-play-state: paused或父元素触发了will-change: transform导致合成层异常
必须同时设置的配套属性
仅靠 animation-iteration-count: infinite 无法保证视觉上“真正循环”，尤其涉及位移、透明度等渐变属性时。以下三项常需显式声明：
-
animation-duration：必须大于0s，例如2s -
animation-timing-function：推荐用linear或ease-in-out，避免ease在首尾减速导致循环卡顿感 -
animation-fill-mode：设为forwards或both，确保每次迭代结束帧被保留，衔接下一循环起点
完整可运行示例（注意关键帧定义）
@keyframes pulse {
0% {
opacity: 0.5;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1.05);
}
}
.element {
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
调试时容易忽略的细节
即使上述都写了，仍不循环？优先排查这些：
- 元素是否被
display: none或visibility: hidden暂时隐藏过？CSS 动画在不可见状态下会暂停，恢复可见后未必自动续播 - 是否在 JS 中动态修改了
animation相关属性（如重设animation-name），触发了浏览器重置动画计时器 - 使用了
prefers-reduced-motion: reduce系统偏好，部分浏览器会强制禁用infinite动画（可通过@media (prefers-reduced-motion: reduce)覆盖）
循环动画的本质是「每轮结束立刻无缝启动下一轮」，任何打断这个衔接的动作，都会让 infinite 失效。
立即学习“前端免费学习笔记（深入）”；
