css颜色过渡需明确写background-color而非background或color，且:hover中必须设置新颜色值，推荐0.25–0.32s时长与ease缓动函数。
transition 用错属性名，颜色不会动
很多人写 background-color 的过渡效果时，直接在 CSS 里加 transition: background 0.3s 或更糟——写成 transition: color 0.3s，结果悬停没反应。根本原因是：CSS 过渡必须明确指定要动的**具体属性名**，且不能缩写。
-
background是复合属性，浏览器不支持对它做过渡（多数浏览器会静默忽略） - 必须写成
transition: background-color 0.3s - 如果同时想过渡边框或文字色，得列全：
transition: background-color 0.3s, border-color 0.3s, color 0.3s - 别漏单位——
0.3不行，得是0.3s或300ms
:hover 里没写新颜色值，过渡就白搭
过渡只是“怎么变”，不是“变成啥”。只在正常状态写 transition，但 :hover 里没改 background-color，那当然没变化。
- 基础结构必须成对出现：
.btn { background-color: #4a90e2; transition: background-color 0.3s; } .btn:hover { background-color: #357abd; } - 颜色值得是可插值的类型：十六进制、rgb()、hsl() 都行；但
transparent和currentcolor在部分老浏览器里过渡可能卡顿 - 避免在
:hover里用inherit或unset，它们不触发颜色插值
IE11 及更老浏览器根本不认 background-color 过渡
IE10–11 对 background-color 过渡的支持极不稳定：有时闪一下就跳变，有时干脆不动。这不是你代码错，是引擎限制。
- 如果必须兼容 IE11，优先用
opacity过渡替代（比如盖一层半透色块） - 或者降级为 JS 控制 class 切换 +
setTimeout模拟延迟，避开 CSS 过渡 - Chrome/Firefox/Edge 80+ 和 Safari 12.1+ 都没问题，放心用
过渡太快或太慢，用户根本感知不到
0.1s 太快像没动，0.6s 又让人觉得卡。人眼对颜色变化的舒适区间其实很窄。
立即学习“前端免费学习笔记（深入）”；
- 推荐从
0.25s起手，微调到0.28s或0.32s—— 这个范围既清晰又不拖沓 - 别用
ease-in-out做颜色过渡，它中间那段匀速太生硬；默认ease（cubic-bezier(0.25, 0.1, 0.25, 1)）更自然 - 移动端要额外加
will-change: background-color，否则某些安卓 WebView 会掉帧
background-color 过渡。其余都是围绕这三要素打补丁。 
