HTML5动画循环设置方法【无限播放教程】

HTML5动画的“无限循环”看似只需加个infinite，实则暗藏三大技术路径的深层差异：CSS靠animation-iteration-count精准控制帧级重复，JavaScript需用requestAnimationFrame链式调用+时间戳实现稳定时序驱动，而SVG则依赖repeatCount="indefinite"等专属属性——三者机制迥异、不可混用，稍有不慎就会引发状态不同步、视觉卡顿或样式残留。真正掌握循环，关键不在表面参数，而在理解每种方案背后的时间模型与生命周期逻辑。

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），稍不留神就会出现状态不同步或样式残留。

好了，本文到此结束，带大家了解了《HTML5动画循环设置方法【无限播放教程】》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！