`animation-delay` 仅控制首次播放前的延迟，无法在每次循环之间插入停顿；要实现“循环间暂停”，需通过延长动画总时长 + 关键帧设计空闲期（如静止帧）来模拟。
在 CSS 动画中，animation-delay 的作用仅限于动画第一次启动前的等待时间，它不会在每次 iteration（迭代）之间重复生效。因此，像问题中期望的“每轮摇晃后停顿 1 秒”这类效果，直接设置 animation-delay: 1s 是无效的。
✅ 正确思路：将“动画动作 + 暂停”合并为单次完整动画周期，再设为无限循环。
以 fa-shake 为例，原动画持续 1s，若希望每次摇晃后暂停 1s，则新动画总时长应为 2s，其中：
- 0% – 50%（即前 1s）：执行原有摇晃动画；
- 50% – 100%（后 1s）：保持最终静止状态（如 rotate(0deg)），形成视觉暂停。
? 修改后的代码如下：
立即学习“前端免费学习笔记（深入）”；
.fa-shake {
animation-name: fa-shake-paused;
animation-duration: 2s; /* 总时长 = 动作时长 + 暂停时长 */
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
width: 150px;
height: auto;
}
@keyframes fa-shake-paused {
/* 0%–49.9%：执行原摇晃逻辑（压缩至前1秒内） */
0%, 5%, 15%, 25%, 35%, 45%, 49.9% {
transform: rotate(0deg);
}
5.5%, 16.5%, 27.5%, 38.5%, 49% {
transform: rotate(10deg);
}
11%, 22%, 33%, 44% {
transform: rotate(-20deg);
}
/* 50%–100%：完全静止，模拟1秒暂停 */
50%, 100% {
transform: rotate(0deg);
}
}? 关键技巧说明：
- 使用百分比关键帧精确分配时间比例（如 50% 对应 1s 处）；
- animation-fill-mode: forwards 确保动画结束帧保持生效（虽此处非必需，但推荐作为良好实践）；
- 避免在 100% 帧使用 transform: none 或未定义值，以防渲染异常。
? 进阶提示：若需更灵活控制（如暂停时长动态调整），可结合 CSS 自定义属性（--pause-duration）与 JavaScript 动态计算关键帧（需配合 @property 或运行时注入样式），但纯 CSS 方案已能满足绝大多数场景。
总结：CSS 动画不支持“迭代间延迟”，但可通过“拉长周期 + 静止帧占位”的方式优雅实现等效效果——本质是把“动-停”封装为原子化的一次动画。
