css 动画无法循环播放怎么办_设置 animation iteration count 为 infinite

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%，且二者不能完全相同（否则浏览器可能优化掉）
• 避免与其他动画属性冲突，比如 anim

  

  ation-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 失效。