`animation-delay` 仅控制首次播放前的延迟，无法在每次循环之间插入停顿；要实现“循环间暂停”，需通过延长动画总时长并合理分配关键帧空闲时段来模拟。
在 CSS 动画中，animation-delay 的作用仅限于动画第一次启动前的等待时间，它不会在 infinite 循环的每次迭代之间重复生效。因此，若希望在每轮 fa-shake 动画结束后“暂停 1 秒”再开始下一轮，直接设置 animation-delay: 1s 是无效的。
✅ 正确解法：将“动画动作 + 暂停”合并为一个完整周期，并通过关键帧（@keyframes）显式定义静止时段。
例如，你希望：
- 摇晃动画本身持续 1 秒（活跃期）；
- 每次摇晃后暂停 1 秒（空闲期）；
- 整体循环周期 = 2 秒。
那么应将 animation-duration 设为 2s，并在 @keyframes 中让最后 1 秒（即 50% → 100%）保持静止：
立即学习“前端免费学习笔记（深入）”；
.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%：执行原摇晃动画（压缩到前1秒内） */
0%, 5%,
15%, 25%, 35%, 45% {
transform: rotate(0deg);
}
10%, 20%, 30%, 40% {
transform: rotate(10deg);
}
15%, 25%, 35%, 45% {
transform: rotate(-20deg);
}
/* 50% → 100%：完全静止，模拟“暂停” */
50%, 100% {
transform: rotate(0deg);
}
}? 关键技巧说明：
- 将原始 1s 动画按比例缩放到 0%–50% 区间（即前半周期），确保视觉节奏不变；
- 50%–100% 全程保持初始状态（如 rotate(0deg)），形成自然停顿；
- animation-timing-function: linear 仍作用于整个 2s 周期，如需停顿更明显，可对静止段使用 steps(1, end) 或结合 cubic-bezier(0,0,0,1) 控制过渡，但通常线性已足够。
⚠️ 注意事项：
- 避免滥用 animation-fill-mode: backwards，它只影响首帧延迟前的状态，不解决循环间停顿；
- 若需更复杂节奏（如暂停 0.3s、加速摇晃），建议用 @keyframes 精确控制各时间节点，而非依赖多个动画叠加；
- JavaScript 方案（如 setTimeout + classList.toggle）虽可行，但纯 CSS 更高效、无 JS 依赖，推荐优先采用。
总结：CSS 动画没有内置“循环间隔”属性，但通过「延长总时长 + 关键帧静默期」的方式，既能保持声明式风格，又能精准实现视觉上的呼吸感停顿。
