按钮hover无过渡效果最常见原因是transition未在默认状态声明且属性值不匹配：必须在非hover选择器中定义transition，并确保过渡属性在默认态和hover态均有具体可动画值。
按钮 hover 没反应，transition 写了但没用
最常见原因是 transition 只作用于「可动画的属性」，且必须在「初始状态」就声明，不能只写在 :hover 里。比如只在 :hover 中加 transition: background-color 0.3s;，浏览器根本不会触发过渡。
-
transition必须写在默认（非 hover）的按钮选择器上，例如button或.btn - 要过渡的属性（如
background-color、color、transform）必须在默认态和:hover态都存在具体值（不能是inherit、unset或缺失） - 避免使用无法过渡的值：比如
display: none ↔ block、height: 0 ↔ auto都不支持过渡
transition 属性写全了吗？别只写时长
只写 transition: 0.3s; 是无效的——它不会自动推断要过渡哪个属性。CSS 不会“猜”你打算动背景还是边框。
- 推荐写法：
transition: background-color 0.3s ease, color 0.3s ease;（明确列出属性 + 时长 + 缓动） - 简写形式
transition: all 0.3s ease;虽方便，但可能意外触发不需要的过渡（比如box-shadow或opacity的微小变化），还可能影响性能 - 如果只动一个属性，直接写死更稳妥：
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
颜色过渡失效？检查是否用了不可动画的颜色值
某些颜色写法会导致 transition 中断或跳变，尤其是跨色彩模型或含透明通道时。
-
rgb(255, 0, 0)→hsl(0, 100%, 50%)：不同色彩空间之间无法平滑插值，浏览器会降级为逐帧跳变 -
#ff0000→rgba(255, 0, 0, 0.8)：十六进制色无 alpha，而 rgba 含透明度，浏览器无法线性混合 - 统一用
rgba()或hsla()开头，确保起始和结束值结构一致，例如：rgba(255, 0, 0, 1)→rgba(255, 0, 0, 0.9)
button {
background-color: rgba(30, 144, 255, 1);
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgba(30, 144, 255, 0.9);
}
用了 !important 或内联样式？它会绕过 transition
如果 :hover 规则里某个属性带 !important，或者按钮有 style="background-color: ..." 这样的内联样式，transition 很可能被忽略——因为浏览器优先应用强制样式，跳过过渡流程。
立即学习“前端免费学习笔记（深入）”；
- 移除所有
!important，改用更精确的选择器提升权重（比如button.primary:hover） - 避免内联样式控制可动画属性；把颜色、尺寸等交由 CSS 类管理
- 用浏览器开发者工具检查 Computed 标签页，确认
transition是否生效、目标属性是否被覆盖
过渡真正起效的前提，是浏览器能明确识别出两个稳定状态之间的连续变化路径。漏掉初始值、混用颜色格式、依赖内联样式，都会让这条路径断裂。