CSS动画循环需设animation-iteration-count: infinite，但首尾帧不一致会导致跳变；配合alternate方向、forwards填充及合理keyframes定义才能实现平滑循环。
CSS 动画默认就能循环播放，关键在 animation-iteration-count 属性设为 infinite，但实际用起来常因忽略时序控制或动画状态重置而“看似没循环”。
animation-iteration-count: infinite 是循环播放的核心
这是最直接的控制方式，必须显式声明，否则默认只播一次。注意它不等于“自动无缝循环”——如果动画末帧和首帧不一致，会出现跳变。
-
animation-iteration-count: 1（默认值）：只执行一次 -
animation-iteration-count: infinite：无限循环 -
animation-iteration-count: 3：精确执行 3 次
搭配 animation-direction 可改变循环行为：
-
normal（默认）：每次都是从头到尾 -
alternate：奇数次正向，偶数次反向（实现平滑往返效果）
animation-fill-mode 影响循环起点是否“重置”
很多“循环卡住”或“第一帧闪一下”的问题，其实是动画结束后样式回退导致的。比如你希望元素始终停在动画最后一帧，但又想下一轮从第一帧开始——这时 animation-fill-mode 就很关键。
立即学习“前端免费学习笔记（深入）”；
-
none（默认）：动画不生效时，不应用任何关键帧样式 -
forwards：动画结束（哪怕只播一次）后，保留最后一帧样式；但循环时仍会从第一帧重新开始 -
backwards：动画开始前就应用第一帧样式（常用于避免初始闪烁） -
both：forwards+backwards同时生效
循环播放时，forwards 不影响循环逻辑，但会影响视觉连贯性——尤其当动画有 transform 或 opacity 变化时。
关键帧（@keyframes）定义决定循环是否自然
即使设置了 infinite，如果 @keyframes 里首尾帧不一致，就会出现“跳变”。例如：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
这个动画每轮都会从 0px 突然跳回 0px，看起来像卡顿。要实现平滑循环，可让末帧回到起始状态，或用 alternate 配合对称关键帧：
@keyframes slideSmooth {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(100px); }
}
或者用 alternate 让方向反转：
div {
animation: slide 2s ease-in-out infinite alternate;
}
JavaScript 控制循环启停时别漏掉 animation-play-state
用 JS 暂停/恢复 CSS 动画，不能靠修改 class 切换动画名，最稳妥的是操作 animation-play-state：
element.style.animationPlayState = 'paused'; element.style.animationPlayState = 'running';
常见陷阱：
- 用
display: none隐藏元素会导致动画完全重置，再显示时从头开始 - 用
visibility: hidden或opacity: 0不影响动画计时，适合临时隐藏但保持循环状态 - 修改
animation-name为none会中断当前动画，再设回来也不会续播
循环本身不难，难的是让每一次迭代都视觉连贯、状态可控——尤其是首尾帧衔接、JS 干预时机、以及浏览器对 fill-mode 的实际渲染表现，这些地方容易被当成“动画 bug”反复调试。
