css 的 `animation-delay` 仅控制首次播放前的延迟，无法实现循环迭代间的暂停；要达成“每次动画结束后停顿再重播”的效果，需通过延长动画总时长并合理分配关键帧时间占比来模拟停顿。
在 CSS 动画中，animation-delay 的作用被广泛误解：它只影响动画第一次启动前的等待时间，而非每次循环（iteration）之间的间隔。因此，即使你设置 animation-delay: 1s 并配合 animation-iteration-count: infinite，动画仍会无缝循环——第 1 次结束瞬间立即开始第 2 次，中间不会出现 1 秒停顿。
✅ 正确解法：将“停顿”作为动画周期的一部分
即：把整个动画周期（animation-duration）拆分为「播放段 + 静止段」，并通过关键帧（@keyframes）让元素在末尾保持静止状态一段时间，从而视觉上形成“循环间停顿”。
以你的 .fa-shake 为例，原动画持续 1s，全程都在运动。若希望每次摇晃后暂停 1s，可将总时长设为 2s，并调整关键帧分布：
.fa-shake {
animation-name: fa-shake;
animation-duration: 2s; /* 总周期：1s 动画 + 1s 静止 */
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards; /* 确保最后一帧状态保留 */
width: 150px;
height: auto;
}
@keyframes fa-shake {
/* 0%–50%：执行完整摇晃动画（压缩到前 1s）*/
0%, 5%, 15%, 25%, 35%, 45%, 50% {
transform: rotate(0deg);
}
5.5%, 15.5%, 25.5%, 35.5%, 45.5% {
transform: rotate(10deg);
}
10.5%, 20.5%, 30.5%, 40.5% {
transform: rotate(-20deg);
}
/* 50%–100%：保持静止（后 1s 不动）*/
50%, 100% {
transform: rotate(0deg);
}
}? 关键要点：
- 将 animation-duration 设为「运动时长 + 停顿时长」之和；
- 在关键帧中，用百分比精确划分：前 X% 完成动画，后 (100−X)% 固定在终态（如 rotate(0deg)）；
- 推荐添加 animation-fill-mode: forwards，确保动画暂停阶段样式稳定；
- 避免使用 animation-delay 试图控制循环间隔——它对此无效。
? 进阶提示：若需更灵活控制（如动态停顿、多阶段节奏），可考虑结合 JavaScript 控制 animation-play-state 或使用 @property + transition 实现更精细的时序逻辑，但纯 CSS 方案已能满足绝大多数循环停顿需求。
立即学习“前端免费学习笔记（深入）”；
