HTML5 本身不提供建模和循环动画API；实现无限循环动画首选CSS @keyframes配合animation-iteration-count: infinite，性能好且易维护；高动态场景需用requestAnimationFrame手动控制帧循环；SVG 已弃用，应改用CSS或JS方案。
HTML5 本身不提供“建模”功能，也没有内置的“循环动画”API；你真正需要的是 Canvas 或 SVG 配合 JavaScript 实现帧动画，或用 CSS @keyframes + animation-iteration-count: infinite 控制无限播放。
用 CSS @keyframes 实现无限循环动画最简单
这是绝大多数 UI 动画（如加载图标、hover 效果）的首选方式，无需 JS，性能好，易维护。
-
animation-iteration-count: infinite是触发无限播放的关键声明，缺它就不会循环 - 别漏写
animation-duration，否则默认为0s，动画不执行 - 如果元素初始状态和动画终点不一致，建议加
animation-fill-mode: forwards或直接用forwards保持末帧，但循环场景下通常设为none（默认）更自然 - 避免在
@keyframes中使用transform: none—— 它不会重置已有的 transform，应显式写成transform: translateX(0) rotate(0)
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading {
animation: spin 1.2s linear infinite;
}
requestAnimationFrame 循环动画必须手动控制
Canvas 绘图、粒子系统、游戏逻辑等动态性高的场景必须用 JS 主动驱动，requestAnimationFrame 是唯一推荐的循环机制。
- 不能用
setInterval模拟帧循环 —— 它不与屏幕刷新同步，容易掉帧、卡顿甚至累积延迟 - 每次回调里必须调用下一次
requestAnimationFrame(callback)，否则只执行一帧就停了 - 动画逻辑要放在回调内，且尽量避免在其中做 DOM 操作或复杂计算；耗时操作请节流或移至 Web Worker
- 暂停/恢复需靠布尔标志位控制，例如
if (!isPaused) { update(); render(); }，而不是取消/重绑 rAF
let isRunning = true;
function animate() {
if (isRunning) {
update(); // 逻辑更新
render(); // Canvas 绘制
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
SVG
虽然 HTML5 允许在 SVG 内嵌 repeatCount="indefinite"），但它属于 SMIL 动画规范，在 Chrome 84+ 已被弃用，Firefox 和 Safari 支持也不稳定，现代项目中应完全规避。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用 CSS 动画控制 SVG 的
transform/opacity等可动画属性 - 若需精确控制路径描边（如
stroke-dasharray进度），用 JS +requestAnimationFrame动态修改stroke-dashoffset - 不要依赖
begin="indefinite"或repeatCount="indefinite"—— 它们在多数新浏览器中已无效果
真正难的不是“怎么让它循环”，而是循环中如何保持时间精度、避免内存泄漏（比如没清理 canvas 清除定时器）、以及响应用户交互及时暂停。这些细节比写个 infinite 多得多。
