animation简写会全量覆盖单独设置的属性，infinite必须按标准顺序写在第5位且前有时长；若duration为0s、未声明或无效，动画不执行；需检查display/visibility、keyframes名称及属性可动画性。
animation 简写中 infinite 被覆盖的典型顺序问题
直接写 animation-iteration-count: infinite 没用，大概率是因为你后面又用了 animation 简写声明——它会把之前单独设置的 animation-iteration-count 全部重置为默认值 1。
简写属性的覆盖逻辑是“全量替换”，不是“增量合并”。哪怕你只漏写了一个值，那一项就会回退到初始值。
-
animation: spin 2s;→ 等价于animation-iteration-count: 1（没写就默认 1） -
animation: spin 2s linear;→ 还是iteration-count: 1 -
animation: spin 2s linear infinite;→ ✅ 正确，infinite是第 5 个位置的值
标准简写顺序固定为：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state。其中前五项最常用，后三项若省略即按默认值处理。
为什么写了 infinite 却只播一次？检查是否漏了 animation-duration
animation-iteration-count: infinite 不是万能开关。如果 animation-duration 是 0s、未声明，或被设为无效值（如 auto），浏览器会认为“无需过渡”，动画瞬间完成，视觉上等于没动。
- 必须显式写一个大于 0 的时长，例如
animation-duration: 0.01s或1.2s - 在简写中，
infinite前面那个值必须是合法时长，否则整个简写可能被部分忽略 - 常见误写：
animation: bounce infinite 0.5s;→ 顺序错，infinite被当成了时长，0.5s反而成了 timing-function，浏览器静默失败
IE 和旧版 Safari 对 infinite 的兼容细节
IE10+ 支持 infinite 关键字，但不支持引号包裹；旧版 Safari（≤13.1）对简写中 infinite 的位置敏感，且不接受小数时长（如 0.3s）与 infinite 同时出现时的解析。
- 错误写法：
animation: fade "infinite" 0.3s;→ 引号导致 IE/Safari 忽略整条声明 - 稳妥写法：
animation: fade 0.3s ease-in-out infinite;，并确保@keyframes中有明确的0%和100%帧 - 如果目标环境含 IE11，建议补全前缀：
-webkit-animation-iteration-count: infinite;、-ms-animation-iteration-count: infinite;
DevTools 里看到 infinite 却不动？先确认动画真被触发了
开发者工具的 Styles 面板显示 animation-iteration-count: infinite，不代表动画正在跑。真正卡住的地方常在更底层：
- 元素
display: none或visibility: hidden→ 动画暂停，切回来也不会自动续播 -
@keyframes名称和animation-name不一致（大小写、连字符、空格）→ 浏览器静默忽略，不报错 - 关键帧内属性不可动画化，比如写了
display: block → none或height: 0 → auto→ 整个动画被跳过 - 父容器
overflow: hidden且动画位移超出范围 → 元素“消失”，误判为没动
最快验证方式：打开 DevTools 的 “Animations” 侧边栏（Elements → Animation），看该元素下是否有动画时间轴条目；没有，说明动画根本没注册成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
