必须显式声明 animation-iteration-count: infinite，因默认值为1；需写入 animation 简写中以防被覆盖；@keyframes 名称须严格匹配且前置定义；配合 linear、alternate 等属性提升循环自然度；验证时可暂改 iteration 数值测试。
animation-iteration-count: infinite，但必须显式声明，不能依赖默认值。
浏览器默认值是 1，不是 infinite。漏掉它，动画就只播一次——这是最常见、最容易被忽略的错误。
必须写在 animation 简写里，别被覆盖
如果单独设置 animation-iteration-count: infinite，后面又用了 animation: spin 2s 这类简写，整个简写会重置所有子属性，包括迭代次数，又变回默认的 1。
- ✅ 正确：
animation: spin 2s linear infinite; - ❌ 错误：
animation: spin 2s; animation-iteration-count: infinite;（后者会被前者覆盖）
名称和定义要严格匹配
@keyframes 名称必须和 animation-name 完全一致，大小写敏感，且必须提前定义。
- 比如
@keyframes rotate { ... }，那 CSS 里就得写animation-name: rotate;，不能写成rotation或Rotate - 若
@keyframes写在引用它的样式规则之后，部分旧版 Safari 可能不执行
配合其他属性让循环更自然
光有 infinite 不够，还要注意节奏和衔接：
- 用
linear替代默认ease，避免旋转类动画在起止点减速造成的“卡顿感” - 想来回动（比如呼吸缩放），加
animation-direction: alternate;，但得确保0%和100%状态可自然衔接，否则循环时会闪 - 旋转动画建议写全单位：
rotate(0deg)→rotate(360deg)，别省略deg，防 Safari 解析失败
验证是否生效的小技巧
临时把 infinite 换成一个具体数字，比如 2 或 3，看动画是否真播那么多次。如果一次都不动，问题大概率出在 @keyframes 名称、拼写或加载顺序上。
立即学习“前端免费学习笔记（深入）”；
