hover离开时过渡失效的根本原因是transition未在默认状态声明，必须在基础选择器中设置transition属性，而非仅写在:hover里，才能确保进出均有平滑动画。
hover 离开时过渡失效的典型表现
鼠标移出元素后，样式“啪”一下直接跳回原状，没有淡入淡出或缓动效果。这不是 hover 本身的问题，而是 transition 没有在**非 hover 状态**（即默认状态）声明导致的。
必须在默认状态写 transition，不能只写在 :hover 里
CSS 过渡是双向生效的：进入 :hover 和离开 :hover 都需要同一个过渡规则参与计算。如果只在 :hover 中写 transition: color 0.3s;，浏览器只会在进入 hover 时触发过渡，离开时则按默认行为——立即回退。
正确做法是把 transition 声明放在元素的**基础选择器**上：
button {
color: #333;
background: #fff;
transition: color 0.3s ease, background 0.3s ease;
}
button:hover {
color: #fff;
background: #007bff;
}
这样无论鼠标移入还是移出，都会触发同一组过渡参数。
立即学习“前端免费学习笔记（深入）”；
transition-property 写 too much 会拖慢离开动画
如果在默认状态写了 transition: all 0.3s;，而实际只改了 color 和 transform，其他未变化的属性（比如 border、padding）也会被纳入过渡检测，可能引发不必要的重绘或延迟响应。
建议明确列出要过渡的属性：
- 用
transition: color 0.3s, transform 0.2s;替代all - 避免对
height、width、top等触发布局计算的属性做过渡（性能差） - 优先用
transform和opacity，它们能走合成层，更顺滑
伪元素 hover 过渡也要同步加 transition
比如用 ::before 实现下划线动画，只给 button:hover::before 加 transform 是不够的：
button::before {
content: '';
display: block;
height: 2px;
background: #007bff;
transform: scaleX(0);
transition: transform 0.3s ease; /* ✅ 必须放这里 */
}
button:hover::before {
transform: scaleX(1);
}
漏掉伪元素本身的 transition 声明，移出时下划线就会瞬间消失。
过渡是否生效，关键不在 :hover 里写了什么，而在默认状态有没有为「变化的属性」配上对应的 transition。很多人卡在这一步，反复调 :hover 却忽略基础样式块。
