可以，但需排除中断因素；常见问题包括隐式重置、fill-mode未设、关键帧不全、overflow裁剪、direction交替误判等，且需注意性能与SSR跳变风险。
animation-iteration-count: infinite 能否真正无限循环？
可以，但前提是动画本身没有被其他 CSS 规则中断或重置。只要 animation-iteration-count 设为 infinite，且动画未被 animation-play-state: paused、display: none、或父元素 visibility: hidden 等行为干扰，浏览器就会持续执行该动画。
常见误判点：动画“卡住”或“只播一次”，往往不是 infinite 失效，而是触发了隐式重置（如元素被 Vue/React 重新挂载、CSS 类被 toggle 导致 animation 重流）。
为什么加了 infinite 还只跑一遍？
典型原因包括：
-
animation-fill-mode没配对：默认是none，动画结束后样式会回退到初始状态，视觉上像“停了”，其实动画仍在循环——只是你看不见变化。建议搭配animation-fill-mode: forwards（保持最后一帧）或both（兼顾首尾） - 动画关键帧定义不完整：比如
@keyframes spin { to { transform: rotate(360deg); } }缺少from，某些浏览器可能在首次迭代后无法正确插值 - 父容器设置了
overflow: hidden且动画元素位移超出范围，造成“消失错觉” - 使用了
animation-direction: alternate却没注意偶数次迭代时方向反转，导致运动路径看起来“静止”
配合 animation-delay 和 animation-duration 的实际影响
animation-delay 只作用于第一次播放前；animation-duration 决定每一圈耗时，两者共同影响节奏感，但不改变循环能力。
立即学习“前端免费学习笔记（深入）”；
例如：
