能，但需动画持续激活；若被 paused、移出 dom、display: none 等中断则停止。常见失效原因包括 duration 为 0、样式覆盖、keyframes 无实际变化、框架重渲染或 safari 后台降频。
animation-iteration-count: infinite 能否真正无限播放？
能，但前提是动画本身没被其他 CSS 规则或 JS 中断。它不是“永不停止”的魔法开关，而是告诉浏览器：只要动画处于激活状态，就重复执行——一旦 animation-play-state 变成 paused，或元素被移出 DOM、display: none、父容器 visibility: hidden，循环就暂停或终止。
为什么加了 infinite 却只播了一次？
常见原因不是写法错，而是动画没持续“运行”下去。检查以下几点：
-
animation-duration必须大于 0（比如0.1s合法，0s或省略会导致动画瞬间完成，看似没动） - 确保没有其他样式覆盖，例如意外设置了
animation-fill-mode: forwards后又用 JS 改了transform，导致动画被强制终止 - 若用
@keyframes定义了 0% → 100%，但 100% 和 0% 的值完全相同（如都是opacity: 1），浏览器可能优化掉这次变化，看起来像没动 - React/Vue 等框架中，组件重渲染可能导致元素被重建，原动画实例丢失
配合 animation-direction 实现平滑往复循环
单靠 infinite 是从头到尾反复“重放”，如果希望“来回走”（比如左右摇摆），得组合 animation-direction: alternate：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
div {
animation-name: shake;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-direction: alternate; /* 关键：偶数次正向，奇数次反向 */
}
@keyframes shake {
0% { transform: translateX(0); }
100% { transform: translateX(10px); }
}
注意：alternate 下每次迭代的起始帧是上一次的结束帧，所以 100% 的值必须和下一次 0% 的值可衔接；否则会出现跳变。
JS 控制 infinite 动画启停的正确姿势
直接改 animation-play-state 最可靠，别用 animation: none 或删 class——那会重置整个动画状态：
- 暂停：
element.style.animationPlayState = 'paused' - 恢复：
element.style.animationPlayState = 'running' - 想彻底重置再播？需先设
animation: none，offsetWidth强制重排，再恢复原 animation 值（否则部分浏览器不触发重播）
容易忽略的是：移动端 Safari 对 infinite 动画在后台标签页会自动降频甚至暂停，这不是 bug，是浏览器节电策略——别依赖它做精确计时或视觉同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
