background-color加transition不生效是因为渐变属于background-image，而transition默认不支持其动画；需用@property声明颜色变量并配合var()实现过渡。
为什么直接给 background-color 加 transition 不生效
因为 background-color 本身支持过渡，但如果你用的是渐变（比如 linear-gradient），浏览器会把它当作「不可动画的背景图像」处理——transition 对 background-image 默认不生效，CSS 动画也拿它没辙。
常见错误现象：background: linear-gradient(red, blue); transition: background 0.3s; 写了但毫无过渡，颜色切换是突变的。
真正能动起来的，是「颜色值本身」，不是整个渐变函数。所以得把渐变里可变的部分（比如起始色、终止色）抽出来，用 CSS 自定义属性表示，再让它们可被动画驱动。
@property 是怎么让自定义变量参与动画的
CSS 自定义属性（--color-a、--color-b）默认只是字符串容器，不能直接参与 transition 或 @keyframes。必须用 @property 显式声明它的类型和取值范围，浏览器才认可它是「可动画的数值/颜色」。
立即学习“前端免费学习笔记（深入）”；
实操要点：
-
@property必须写在:root或全局作用域下，不能嵌套在选择器里 - 类型必须设为
color（不是string或initial），否则动画跳变或报错 -
syntax值必须是<color>，且inherits推荐设为false（避免意外继承干扰）
示例声明：
@property --grad-start {
syntax: '<color>';
inherits: false;
initial-value: #ff6b6b;
}
@property --grad-end {
syntax: '<color>';
inherits: false;
initial-value: #4ecdc4;
}
如何用 transition 驱动渐变色变化
声明完 @property 后，就能在元素上用 transition 直接过渡这两个变量，再通过 background-image: linear-gradient(var(--grad-start), var(--grad-end)) 把它们注入渐变。
关键细节：
- 过渡目标必须是变量名本身，比如
transition: --grad-start 0.4s ease, --grad-end 0.4s ease; - 不能写成
transition: background 0.4s;—— 它不感知变量变化 - 触发方式可以是
:hover、JS 修改style.setProperty()，或 class 切换
简单 hover 示例：
.btn {
--grad-start: #ff6b6b;
--grad-end: #4ecdc4;
background-image: linear-gradient(var(--grad-start), var(--grad-end));
transition: --grad-start 0.4s ease, --grad-end 0.4s ease;
}
.btn:hover {
--grad-start: #45b7d1;
--grad-end: #96ceb2;
}
兼容性与容易忽略的坑
@property 目前仅 Chromium 内核（Chrome 85+、Edge 85+、Opera 71+）原生支持；Firefox 和 Safari 尚未实现。没有降级方案时，用户看到的就是无动画的硬切。
容易踩的坑：
- 忘记加
@property声明，只改变量 —— 表面能切色，但绝对没有过渡 - 把
syntax写成'<length>'或漏掉引号，导致声明无效，控制台可能静默失败 - 在 JS 中动态设置时，用
element.style.setProperty('--grad-start', 'red')没问题，但若用element.style.cssText = '--grad-start: red;'，会清空其他自定义属性，慎用 - 渐变方向（如
to right）不能用变量控制 ——@property不支持<angle>或<side-or-corner>类型，目前只能动颜色
真要兼容老浏览器，得 fallback 到两层伪元素 + opacity 过渡，或者用 SVG 渐变 + animate，但那就完全不是同一套逻辑了。
