动画延迟与持续时间需协同匹配，确保启动自然、衔接流畅；完整周期为delay+duration，多动画衔接时后者的delay应等于前者duration；配合animation-fill-mode: backwards可避免延迟期样式塌陷；时间单位须统一用秒；Chrome Animations面板支持实时调试。
动画延迟（animation-delay）和持续时间（animation-duration）不匹配，通常会导致动画启动突兀、衔接断裂或节奏混乱。关键不是单独调大或调小某一项，而是让两者在时间逻辑上协同——延迟是“等多久再开始”，持续时间是“动多长时间”，它们共同决定动画在时间轴上的位置和节奏。
明确动画周期与触发时机
一个完整的动画周期 = delay + duration（忽略 iteration-count > 1 的情况）。如果你希望多个动画依次衔接，比如 A 动完立刻 B 开始，那 B 的 animation-delay 应等于 A 的 animation-duration；若想留空隙，就在此基础上额外加时间。
- A 元素：`animation-duration: 0.6s;` → 完整播放耗时 0.6 秒
- B 元素需紧接其后：`animation-delay: 0.6s;`
- B 元素需间隔 0.2 秒再启动：`animation-delay: 0.8s;`
用 animation-fill-mode 避免延迟期的样式塌陷
默认情况下，元素在 animation-delay 阶段仍保持初始样式，动画未开始就不受关键帧控制。如果延迟过长，用户可能看到“静止空白”，误以为动画卡住。这时加上 animation-fill-mode: backwards;，能让元素在延迟阶段就应用 @keyframes 中 0%（或 from）定义的样式。
例如按钮悬停动画延迟 1 秒才放大，但你希望它一开始就呈现待激活态（如轻微阴影），就要配合 backwards，否则延迟期间会退回无样式状态。
立即学习“前端免费学习笔记（深入）”；
避免 delay 和 duration 数值单位混用
CSS 中时间单位必须统一：全用秒（s）或全用毫秒（ms）。混用会导致解析失败或意外行为，比如 animation-delay: 0.5s; animation-duration: 300ms; 看似合理，但可读性差，也易引发计算误差。建议项目内统一使用秒（保留一位小数，如 0.3s、0.45s），既直观又便于估算总周期。
借助开发者工具实时调试时间参数
Chrome / Edge 的 **Animations 面板**（在 DevTools 的“更多工具”中）能直观显示每个动画的 delay、duration、当前进度和重播状态。把鼠标悬停在时间轴上，就能看到精确到毫秒的数值；拖动时间轴还能“冻结”任意帧观察样式。这是比反复刷新更高效的方式，尤其适合调整多个嵌套或交错动画的时间关系。
