CSS动画循环需设置animation-iteration-count: infinite，必须写在动画调用处而非@keyframes内；检查是否被覆盖、animation-play-state是否为paused，确保简写中包含infinite且无JS重置干扰。
CSS动画无法循环，通常是因为没有正确设置循环属性。只需在动画规则中添加 animation-iteration-count: infinite;，就能让动画无限重复播放。
确保 animation-iteration-count 设为 infinite
这是实现无限循环最直接的方式。它必须写在应用动画的元素上（或在 @keyframes 外部的动画声明中）：
- 写法示例：
animation: slide 2s ease-in-out infinite; - 或分开写：
animation-name: slide; animation-duration: 2s; animation-iteration-count: infinite; - 注意：不能只在
@keyframes内部设置，该属性只对外部动画调用生效
检查是否被其他样式覆盖或重置
有时动画循环失效，是因为后续 CSS 覆盖了 animation-iteration-count：
- 用浏览器开发者工具检查元素最终计算出的
animation-iteration-count值，确认是否为infinite - 避免在媒体查询、伪类（如
:hover）或 JS 动态样式中意外设为1或具体数字 - 若使用了
animation简写，要确保没漏掉infinite—— 简写中省略该值会默认为1
留意 animation-play-state 和触发时机
即使设了 infinite，动画也可能“看似不循环”：
立即学习“前端免费学习笔记（深入）”；
- 检查是否误设了
animation-play-state: paused;，导致动画停在第一轮结束位置 - 确认动画已自然启动（比如没被父元素
display: none或opacity: 0阻断渲染） - 若用 JS 控制，避免反复调用
element.style.animation = "..."——这会重置动画计时，打断连续循环
兼容性与常见误区
该属性在所有现代浏览器中均支持（包括 Chrome、Firefox、Safari、Edge），无需前缀：
- 不要写成
animation-iteration-count: infinite !important;除非真有覆盖冲突，否则可能掩盖真正问题 - 避免和
animation-fill-mode混淆：forwards只影响首尾帧停留，不影响循环次数 - 如果动画本身只有两个关键帧且无位移变化，可能“看起来没动”，需检查
@keyframes定义是否有效
不复杂但容易忽略。只要保证 infinite 正确写入动画声明，并排除覆盖和暂停干扰，CSS 动画就能稳定循环。
