17370845950

HTML5动画循环由animation-iteration-count（CSS）、requestAnimationFrame链式调用（JS）或SVG的repeatCount/repeatDur控制，三者机制不同需避免混用导致状态不同步。

HTML5 动画本身没有“循环播放”这个独立属性，真正控制循环的是 animation-iteration-count CSS 属性，或者 JavaScript 中对 requestAnimationFrame 的手动调度逻辑。

用 animation-iteration-count: infinite 实现 CSS 动画无限循环

这是最常用、最直接的方式。只要动画是用 @keyframes 定义的，就能靠这个属性控制重复次数。

• animation-iteration-count 默认值是 1，设为 infinite 即可无限循环
• 它不影响动画时长（animation-duration）或延迟（animation-delay），但会和 animation-direction 交互：比如设成 alternate 会让动画来回播放，每次“循环”其实是正向+反向各一次
• 注意不要和 animation-fill-mode 冲突——如果设了 forwards，最后一次关键帧样式会保留，可能掩盖循环起始状态，导致视觉上像“卡住”而非循环

@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
.box {
  animation-name: slideIn;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

JavaScript 动画循环：别直接递归调用 requestAnimationFrame

用 requestAnimationFrame 手写动画时，常见错误是写成“自己调自己”的递归形式，这会导致调用栈爆炸或无法中断。

• 正确做法是让回调函数最后再调一次 requestAnimationFrame(callback)，形成链式调用而非嵌套递归
• 必须配合时间戳（timestamp 参数）做帧间差值计算，否则在不同刷新率设备上会快慢不一
• 想暂停/重启循环？不能靠 return 或抛错中断，得用布尔标志位 + 条件判断跳过绘制逻辑

let isRunning = true;
function animate(timestamp) {
  if (!isRunning) return;
  // 更新逻辑，例如：element.style.transform = `translateX(${pos}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

SVG 标签的循环陷阱

SVG 内联动画虽已不推荐新项目使用，但老代码里仍常见。它的循环控制字段是 repeatCount 或 repeatDur，容易混淆。

立即学习“前端免费学习笔记（深入）”；

• repeatCount="indefinite" 才是无限循环（不是 infinite）
• repeatCount="0" 表示不重复，即只播一次；repeatCount="2" 是总共播 3 次（初始 + 2 次重复）
• 若同时写了 repeatCount 和 repeatDur，后者优先级更高，且单位必须带 s 或 ms，比如 repeatDur="5s"
• 该标签不支持 CSS 动画那些缓动函数（cubic-bezier），只能用 calcMode 粗略控制插值方式

真正难的不是加个 infinite，而是理解「循环」背后的时间模型：CSS 动画按帧数循环，JS 动画按时间戳驱动，SVG 动画则混用时间和次数。一旦混合使用（比如用 JS 控制 CSS 动画的 animation-play-state），稍不留神就会出现状态不同步或样式残留。