background 不生效因它非可动画简写属性，应改用 background-color；渐变不支持平滑过渡，需用纯色层模拟；避免 transition: all，注意移动端兼容性及硬件加速陷阱。
transition background 不生效的常见原因
直接写 transition: background 0.3s 很可能没反应——因为浏览器不认为 background 是一个可动画的简写属性，尤其当它包含渐变（linear-gradient）或多个值时。真正能平滑过渡的是具体的颜色成分，比如 background-color。
- 如果按钮用的是纯色背景，改用
background-color替代background，再配transition - 如果用了
linear-gradient，CSS 原生不支持渐变本身的过渡（直到较新版本的 Chrome/Firefox 支持background-image过渡，但兼容性差、行为不稳定） - 别在
:hover里突然把background从纯色改成渐变，这种类型切换必然跳变
纯色按钮的平滑悬停：只动 background-color
这是最稳妥、兼容性最好的做法。只要起始和结束状态都是单色，background-color 就能自然插值过渡。
button {
background-color: #4a6fa5;
transition: background-color 0.25s ease;
}
button:hover {
background-color: #355681;
}
- 务必写
ease或ease-in-out，默认ease已够用；避免用linear，生硬 - 不要同时写
transition: all 0.25s，容易意外触发其他属性动画（比如边框、文字阴影），干扰预期 - 移动端需注意：部分 iOS Safari 对快速连续悬停响应滞后，可加
will-change: background-color提前提示渲染层（但别滥用）
想用渐变又想要过渡？得绕开 background-image
CSS 标准里 background-image 的过渡支持很晚才来，且 Safari 直到 16.4 才开始有限支持，实际项目中仍不可靠。更稳的办法是「用两个重叠的纯色层模拟渐变感」。
button {
position: relative;
background-color: #4a6fa5;
transition: background-color 0.25s;
}
button::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
z-index: 1;
}
button:hover {
background-color: #355681;
}
-
::before层只负责高光/蒙版效果，主体色仍由background-color控制，保证过渡可控 - 如果必须换整个渐变方向或色标，只能接受跳变，或改用 SVG 背景 + JS 控制 opacity 切换（复杂度陡增）
- 别试图用
filter: brightness()模拟，它会影响整个元素（包括文字），且性能不如原生 color 过渡
transition 触发时机和硬件加速陷阱
即使写对了属性，也可能卡顿或延迟——问题常出在浏览器没把该元素提升为独立图层，或过渡被其他样式阻塞。
- 确保 hover 状态没有触发 layout（例如改
height、margin），否则会强制重排，transition失效 - 避免在
transition中使用box-shadow+background-color同时变化，某些旧版 Chrome 会掉帧 - 如需极致顺滑，可对按钮加
transform: translateZ(0)或will-change: background-color，但仅限已确认有卡顿的场景，别全局加
真正难的不是写那行 transition，而是判断该动哪个属性、哪些值能被浏览器真正插值、以及什么时候该放弃视觉妥协换稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
