支持，但需起始和结束状态均显式声明确定的颜色值（如HEX/RGB/HSL），避免transparent、inherit或简写background覆盖导致插值失败；transition须写在初始状态规则中，时长200–400ms，推荐cubic-bezier(0.25,0.46,0.45,0.94)。
background-color 支持 transition 吗？
支持，但有前提：必须是从一个明确的颜色值变到另一个明确的颜色值，不能是 transparent 和 inherit 这类非数值型值混用，也不能从无定义背景（比如没写 background-color）突然加颜色——浏览器无法插值。
常见踩坑：background 简写属性会重置所有子属性，包括 background-color、background-image 等。如果用 background: #fff 覆盖了原本带渐变的样式，过渡就失效了。
- 确保起始和结束状态都显式声明
background-color - 避免在 hover 或 class 切换时只改
background简写 - 用开发者工具检查 computed styles，确认两个状态下的
background-color值都是确定的 RGB/HSL/HEX
transition 写在哪？写多长？
过渡规则要写在「初始状态」的 CSS 规则里，不是 hover 里。时长建议 200ms–400ms：太短看不出效果，太长显得迟滞。
缓动函数推荐 cubic-bezier(0.25, 0.46, 0.45, 0.94)（接近 iOS 弹性效果），或直接用 ease-in-out。别用 ease，它开头太慢，颜色变化“启动感”弱。
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #4a6fa5;
transition: background-color 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
background-color: #6387c9;
}
多个背景色切换时 transition 不生效？
典型场景：用 JS 动态切换 class，但颜色立刻跳变。原因往往是 class 移除和添加发生在同一帧，浏览器没机会触发过渡。
解决方法不是加 !important，而是强制重排或分帧：
- 用
getComputedStyle(el).backgroundColor触发重排，再改 class - 用
setTimeout(() => el.classList.add('active'), 0)延迟到下一帧 - 更稳妥：始终用
el.style.backgroundColor = 'new'配合内联 transition，避开 class 切换时机问题
注意：若同时修改多个颜色（比如文字+背景），建议统一用 transition: all 300ms，但要小心意外触发其他属性动画；更推荐明确列出 transition: background-color 300ms, color 300ms。
深色模式下背景色过渡闪烁怎么办？
当系统深色模式切换时，CSS 自定义属性（如 --bg-color）更新，但 background-color: var(--bg-color) 的变化默认不触发 transition——因为变量值变了，但属性本身没“重新计算”过渡起点。
解决方案只有两个：
- 监听
prefers-color-scheme媒体查询，在 JS 中手动添加过渡 class 并延时切换颜色 - 放弃变量依赖，对 light/dark 分别写死两套带 transition 的规则，用媒体查询包裹
后者更可靠：
@media (prefers-color-scheme: light) {
.card {
background-color: #f8f9fa;
transition: background-color 250ms ease-in-out;
}
.card.dark-mode {
background-color: #212529;
}
}
@media (prefers-color-scheme: dark) {
.card {
background-color: #212529;
transition: background-color 250ms ease-in-out;
}
.card.light-mode {
background-color: #f8f9fa;
}
}
真正难的不是写 transition，而是确保浏览器在每一帧都能拿到可插值的起点和终点值——中间任何一步被简写覆盖、变量跳变或 JS 同步操作打断，都会让平滑变成瞬移。
