必须显式声明 transition: background-color 0.3s ease，避免用 all；初始和目标色值需同类型（如均用十六进制），且元素必须有明确 background-color 声明；移动端需设 -webkit-tap-highlight-color: transparent。
transition 作用于 background-color 时必须写全名
直接写 transition: all 0.3s 看似省事，但容易失效——尤其是当元素初始 background-color 是 transparent、inherit 或未声明时，浏览器可能无法解析颜色插值路径。必须显式指定属性名：
-
transition: background-color 0.3s ease（推荐） - 避免用
transition: all，它会把border、box-shadow等无关变化也纳入过渡，干扰预期效果 - 如果同时改多个颜色相关属性（如
background渐变），需单独为background-color设定过渡，因为background是复合属性，不能被transition精确识别
color 值必须可插值，否则过渡会跳变
CSS 过渡依赖浏览器对颜色值的线性插值能力。以下写法会导致“闪一下”或直接跳变：
- 从
background-color: #fff到background-color: currentColor——currentColor是动态计算值，不参与插值 - 使用
hsl(0, 0%, 100%)→rgba(255, 255, 255, 0.8)：不同色彩模型间插值不可靠，尤其透明度混合逻辑不一致 - 初始值是
unset或initial，这些关键字不构成可插值的颜色起点
稳妥做法：始终使用同类型、明确值的颜色表示，例如都用 rgb() 或都用十六进制：
button {
background-color: #4a6fa5;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2c4a70;
}
:hover 触发前需确保元素有明确的初始 background-color
很多“过渡不动”的问题，根源在于元素默认没有 background-color 声明（比如原生 button 在某些 UA 样式中背景由 background 复合属性控制，而非 background-color 单独设置）。
立即学习“前端免费学习笔记（深入）”；
- 显式设置初始
background-color: transparent或具体色值，比依赖浏览器默认更可控 - 检查 computed style：在开发者工具中确认 hover 前后
background-color的 computed 值是否都是 RGB/HEX 类型，且非rgba(0,0,0,0)（部分旧版 Safari 对全透明插值支持差） - 若用 CSS 变量，要确保变量在 :root 或父级已定义，且 hover 中是修改变量值而非重写整个
background
移动端点击无过渡？可能是 tap-highlight-color 干扰
在 iOS Safari 或部分安卓浏览器中，点击元素会触发短暂的灰色高亮（-webkit-tap-highlight-color），覆盖掉你设置的 background-color 过渡，造成“没反应”的错觉。
- 加一句
-webkit-tap-highlight-color: transparent消除干扰 - 确保
touch-action: manipulation已设置，提升触摸响应优先级 - 真机测试时，禁用快速点击（double-tap to zoom）可能意外阻止 :active 状态触发，影响过渡起始
复杂点在于：过渡是否生效，不只取决于 CSS 写法，还和初始状态是否可计算、颜色模型是否匹配、以及平台层交互行为是否干扰密切相关。漏掉其中任意一环，都会让平滑变成卡顿或消失。
