Hover动画顺序出错主因是animation-delay、duration与keyframes时间点未对齐，需显式声明各项参数，确保关键帧百分比匹配实际时间段，并用animation-fill-mode或JS控制状态以避免重置错乱。
Hover 动画顺序出错，通常不是 CSS 本身“记错了顺序”，而是 animation-delay、animation-duration 和关键帧（@keyframes）中时间点的逻辑没对齐。重点不在“谁先谁后”，而在“每个动画从哪一秒开始、持续多久、中间状态是否冲突”。
检查 animation-delay 是否被覆盖或重置
多个 hover 动画叠加时，如果都写在同一个选择器里，且未明确区分延迟，浏览器会按声明顺序执行，但视觉上可能“抢跑”或“卡顿”。常见问题：
- 两个动画用了相同
animation-name，导致后声明的覆盖前声明的 delay - 父元素 hover 触发子元素动画，但子元素自身也有 hover 样式，造成 delay 冲突
- 使用了
animation: name 0.3s ease-in-out这类简写，意外清除了之前设置的delay
✅ 建议：统一用完整写法，显式声明每一项
.box:hover .item {animation-name: slideIn;
animation-duration: 0.4s;
animation-delay: 0.1s;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
}
keyframes 中的时间点要匹配 delay 和 duration
比如你设了 animation-delay: 0.2s、animation-duration: 0.6s，那整个动画实际作用时间段是 0.2s → 0.8s。此时 keyframes 里的 0% 对应 0.2s 瞬间，100% 对应 0.8s 瞬间 —— 不是“从 0s 开始算”。如果 keyframes 写了 20% { opacity: 0 }，它实际发生在 0.2s + 0.2×0.6s = 0.32s。
立即学习“前端免费学习笔记（深入）”；
✅ 建议：用百分比设计 keyframes，别硬写具体秒数；若需精确控制节奏，把 delay + duration 换算成总时间再规划阶段点。
多个元素依次动画？别只靠 delay 递增
单纯给每个子元素加 animation-delay: 0.1s、0.2s、0.3s 看似合理，但一旦 hover 离开又快速移回，容易因动画未完成就被重置，导致顺序错乱或跳帧。
- 加
animation-fill-mode: forwards保持末态，避免闪回 - 用
animation-play-state: paused / running配合 JS 更稳妥（如 hover 进入时统一 play，离开时暂停并重置） - 考虑改用 CSS 自定义属性 + transition，对简单入场/缩放更稳定
调试小技巧：临时加 outline 或 background-color
在动画关键帧里插入明显视觉标记，比如：
@keyframes debugStep {0% { background: #ff0; }
50% { background: #0f0; }
100% { background: #00f; }
}
能直观看出各阶段是否准时触发、有无跳过或卡住，比猜 delay 数值快得多。
