HTML5动画怎么循环播放_HTML5动画无限循环设置技巧【循环指南】_技术教程

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);