transition实现颜色平滑补间需满足三条件：颜色格式统一（推荐hsl/rgba）、transition声明在初始状态而非:hover、承载属性（如background-color）必须显式定义。
transition 能实现两个颜色的平滑补间，但必须满足三个硬性条件：颜色值格式一致、transition 声明在初始状态、承载颜色的属性（如 background-color 或 color）已显式定义。
transition 必须写在默认状态，不能只在 :hover 里
浏览器只在元素首次渲染时检查是否启用了过渡，不是看新样式有没有加 transition。如果只在 :hover 中写 transition: background-color 0.3s，移入时有动画，移出时直接跳回原色——因为移出后目标状态没了 transition 声明。
- ✅ 正确：
.btn { background-color: #4a90e2; transition: background-color 0.3s ease; }+.btn:hover { background-color: #1e6bd8; } - ❌ 错误：
.btn { background-color: #4a90e2; }+.btn:hover { background-color: #1e6bd8; transition: background-color 0.3s ease; } - 即使用了
@keyframes，若初始状态没设background-color，动画第一帧也可能闪一下
颜色值必须用可插值格式，避免混用 #fff / rgb() / hsl()
CSS 插值引擎对不同颜色表示法的支持不一致。比如 #ff6347 → rgb(255, 105, 71) 在 Safari 15–16 和旧版 Chrome 中可能中断插值；transparent 在部分 Safari 版本中也不稳定。
- ✅ 推荐统一用
hsl()或rgba()：它们天然支持通道级线性插值，过渡更顺滑 - ✅ 示例：
hsl(12, 100%, 60%)→hsl(210, 80%, 50%)或rgba(0,0,0,0.8)→rgba(0,0,0,0) - ❌ 避免：
#000→white、currentColor（未显式定义时）、inherit、transparent
background-color 不能直接过渡到 linear-gradient()
background-color 和 background-image: linear-gradient() 是完全不同的 CSS 属性，浏览器不支持跨类型插值。写了 transition: background 0.3s 后把纯色换成渐变，结果一定是跳变。
- ✅ 可行方案一：始终用
linear-gradient()，只改 color stop 的颜色值，且保持所有位置参数（如0%、100%）不变
例如：background: linear-gradient(to right, #ff6347, #1e90ff);→background: linear-gradient(to right, #ff7e5f, #feb47b); - ✅ 可行方案二：用
::before伪元素覆盖一层渐变背景，再对它的opacity做transition，底层保留纯色 - ⚠️ 注意：
Chrome 120+实验性支持background-image中 color stop 的直接过渡，但Safari和Firefox仍未跟进，生产环境别依赖
真正容易被忽略的是：颜色过渡是否生效，和你写的“动画代码”关系不大，而取决于初始状态是否完整声明了可插值的颜色值 + 过渡开关 + 属性载体。漏掉任意一个，都会在移出或首次触发时出现跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
