CSS中不存在transition-background-color属性，需用transition配合background-color实现背景色平滑变化，且起始与结束颜色格式必须统一（如均用hsl()或十六进制），transition声明须写在默认状态而非:hover中。
transition-background-color 并不存在 —— CSS 中没有这个属性。想让背景色平滑变化，必须用 transition 配合 background-color，而不是靠一个虚构的过渡属性。
background-color 支持 transition 吗？
支持，但有前提：起始值和结束值都必须是可插值的颜色格式（比如都是 rgb()、都是 hsl()、或都是十六进制）。混用格式（如 #ff0 → rgba(255, 0, 0, 0.5)）会导致过渡失效，浏览器会直接跳变。
- ✅ 推荐统一用
hsl()：方便控制亮度/饱和度渐变，且天然支持透明度变化（hsla()） - ✅ 十六进制也可，但不支持 alpha，要透明得换
rgba()或hsla() - ❌ 避免
currentcolor或transparent与具体色值之间切换——部分浏览器插值行为不一致
transition 写在哪？hover 时没反应怎么办？
必须写在**触发前的状态上**（比如默认状态），而不是 hover 里。否则浏览器无法预判过渡意图，只会立即渲染新颜色。
.btn {
background-color: #4a6fa5;
transition: background-color 0.3s ease; /* ✅ 这里写 */
}
.btn:hover {
background-color: #6387c9; /* ❌ 这里不写 transition */
}- 检查是否遗漏了
transition声明（常见于复制粘贴时漏掉） - 确认伪类（如
:hover、:focus）选择器优先级没被覆盖 - 如果背景是
background-image或渐变，background-color过渡可能被遮盖——需明确只改 color 层
为什么用了 transition 还是卡顿或跳变？
本质是重绘（repaint）性能问题。虽然 background-color 是廉价属性，但在某些场景下仍可能触发 layout 或低效绘制：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
transform: translateZ(0)或will-change: transform时，可能意外干扰背景层合成 - 使用了
box-shadow+background-color同时变化，建议拆成两个独立transition，或只动 color - 旧版 Safari 对
hsl()插值支持不稳定，可降级为rgb()测试 - 动画帧率受系统负载影响，纯 CSS 过渡无法保证 60fps —— 不要指望它替代
requestAnimationFrame级精细控制
真正要注意的不是“怎么写 transition”，而是颜色值是否可插值、声明位置是否正确、以及是否无意中引入了强制同步布局的操作。这些细节比语法本身更容易导致失败。
