animation-iteration-count设为infinite可实现CSS动画无限循环，需显式声明避免默认值1；配合alternate可来回播放，但需确保keyframes首尾自然衔接；animationend事件在infinite下不触发，应改用setInterval或requestAnimationFrame实现周期回调。
animation-iteration-count 设为 infinite 就能循环播放
HTML5 的 CSS 动画默认只播一次，想让它不停循环，最直接的方式是用 animation-iteration-count: infinite。这个属性写在触发动画的 CSS 类里就行，不需要 JS 干预。
常见错误是只写了 animation 简写属性但漏掉迭代次数，比如：animation: slide 2s ease —— 这里没显式指定 iteration count，浏览器按默认值 1 处理，播完就停。
- 必须显式写
infinite，不能写成0或-1（无效值会退回到默认 1） - 配合
animation-direction: alternate可实现“来回”循环，避免生硬跳回起点 - 若动画依赖
@keyframes中的0%和100%，确保这两帧状态可自然衔接，否则循环时会出现闪动
用 JavaScript 控制暂停/恢复/重播更灵活
纯 CSS 循环适合固定节奏，但实际中常需响应用户操作（比如点击暂停、拖拽进度条、切换动画类型），这时得靠 JS 操作 animation-play-state 或重新触发动画。
关键点不是“怎么循环”，而是“怎么可靠地重置并重启”。直接改 className 或 style.animation 容易失效，因为浏览器可能跳过重绘。
立即学习“前端免费学习笔记（深入）”；
- 暂停/恢复：设置
element.style.animationPlayState = 'paused'或'running' - 强制重播：先移除动画类 →
offsetWidth触发重排 → 再加回类（或重设style.animation） - 避免用
setTimeout模拟循环，CSS 动画本身有更高精度和性能优势
animationend 事件监听不适用于无限循环
很多人想用 animationend 在每次循环结束时做点事，但注意：animation-iteration-count: infinite 下这个事件**根本不会触发**——因为“结束”不存在。
如果真需要每轮回调（比如更新计数器、切换数据），有两个靠谱办法：
- 用
setInterval模拟周期，时间间隔严格对齐动画时长（例如动画 3s，setInterval(fn, 3000)），但要注意页面失焦时定时器可能不准 - 改用
requestAnimationFrame+ 时间戳手动计算当前帧，完全接管动画逻辑，适合复杂交互动画 - 别试图监听
animationend后再手动 restart，既多余又不可靠
兼容性与性能提醒
现代浏览器对 animation-iteration-count: infinite 支持很好，IE10+ 也支持，但 iOS Safari 低版本（如 iOS 9.3）对 animation-fill-mode 和循环衔接有渲染 bug，表现为最后一帧卡住或跳变。
- 务必测试真实设备，尤其老 iPad；可用
animation-fill-mode: forwards配合infinite减少视觉断裂 - 大量元素同时跑无限 CSS 动画会持续占用合成线程，导致滚动卡顿；优先用
transform和opacity属性，避免触发布局重排 - 如果动画逻辑复杂（比如条件分支、多状态切换），别硬塞进 CSS，JS +
requestAnimationFrame更可控
