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 <animate> 标签的循环陷阱
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），稍不留神就会出现状态不同步或样式残留。
