animation-delay仅在首次播放前生效，无法实现循环间停顿；正确方法是延长animation-duration并将暂停作为关键帧静止段纳入周期，例如原1s动画加0.5s停顿，总时长设为1.5s，前66.7%执行动画，后33.3%保持终态。
animation-delay 不起作用，它只在第一次播放前生效。想让每次循环之间有停顿，必须把“停顿”塞进动画周期里，当成关键帧的一部分。
为什么 animation-delay 对循环间隔无效
这个属性的设计就是单次前置延迟——哪怕你写 animation-delay: 1s + animation-iteration-count: infinite，第 2 次、第 3 次……迭代依然紧接上一次结束瞬间开始，中间零延迟。浏览器不把它当作“每轮间隔”，只是“启动前等一下”。
用 @keyframes 把暂停时间“压”进总周期
核心思路：拉长 animation-duration，再用关键帧让后半段保持静止。
- 假设原动画动作为 1s，想加 0.5s 暂停 → 总时长设为
animation-duration: 1.5s - 动作部分压缩到前 1s（即 0% → 66.7%），关键帧数值按比例缩放
- 静止部分占 0.5s（即 66.7% → 100%），所有帧都设成最终态或起始态
- 务必加
animation-fill-mode: forwards，否则暂停段可能因样式回退而闪烁
animate.css 场景下不能改 keyframes？用 JS 补位
如果你用的是 animate.css 这类预编译库，没法直接改 @keyframes，就得靠 JS 控制节奏：
- 监听
animationend事件，触发后立刻移除动画 class - 用
setTimeout延迟再加回 class，延迟时间 = 期望间隔 - 注意：要避免连续快速触发导致动画堆叠，可加节流标记（如
isAnimating = false） - 别用
animation-play-state: paused配负animation-delay—— 实际行为难预测，尤其跨浏览器时
容易被忽略的细节
关键帧首尾状态不一致会放大跳变感：比如动画末帧是 transform: rotate(10deg)，但暂停段又回到 rotate(0deg)，视觉上就是“抖完突然弹回再停”，不是“抖完停住”。真正要停，得让暂停段从动作结束态开始保持，而不是硬切回初始态。这点在调试时经常被跳过，结果调了半天发现只是关键帧没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
