css中linear-gradient()内无法用var()实现颜色动画，因方向参数必须为字面量且自定义属性不在可动画白名单；可行方案是@property注册颜色变量或用background-position位移渐变画布。
直接用 var(--color) 替换 linear-gradient() 中的颜色参数，动画一定失效——这不是写法问题，是 CSS 解析阶段就拒绝执行，浏览器根本不会尝试插值。
linear-gradient() 里不能用 var() 做动画的根本原因
浏览器在解析 linear-gradient(var(--start), #f00, #00f) 时，var() 还没展开，整个函数因“方向参数非静态值”被判定为语法无效，退回到透明背景。你不会看到报错，只会发现元素突然消失或闪一下。
-
linear-gradient()要求第一个参数（方向）必须是字面量，比如45deg或to right，不接受任何表达式或变量 -
var(--color)放在颜色位置（第二、三参数）看似合法，但只要整个linear-gradient()函数因方向非法而失效，颜色部分也一并作废 - 即使你把方向写死（如
linear-gradient(45deg, var(--start), var(--end))），transition或@keyframes依然对--start无反应——因为--start是自定义属性，不在可动画属性白名单里
真正能动起来的两种方案
想让渐变颜色“过渡”，必须绕开 linear-gradient() 对变量的硬性限制，走间接路径。
- 用
@property注册颜色变量，并绑定到标准可动画属性上：
例如@property --grad-start { syntax: "<color>"; initial-value: #ff6b6b; }</color>，再配合background: linear-gradient(45deg, var(--grad-start), #4ecdc4); transition: --grad-start 0.5s; - 放弃变量驱动渐变本身，改用
background-position移动一个超大渐变画布：background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ff6b6b); background-size: 300% 100%; background-position: 0% 50%; transition: background-position 0.5s;，hover 时设为background-position: 100% 50%
容易被忽略的兼容性细节
@property 方案虽干净，但 Chrome 110+、Safari 16.4+ 才支持，且 syntax: "<color>"</color> 不接受 transparent 或 currentColor ——如果你用了这些值，注册会静默失败（DevTools 里该规则变灰），动画照样不动。
- 检查
@property是否生效：打开 DevTools → Styles 面板，看对应规则是否高亮；若变灰，说明syntax和initial-value类型不匹配 -
background-position方案更老浏览器也跑得稳，但要注意background-size太大会拖慢 GPU 渲染，400% 是较安全的上限 - 别在
background简写里混用变量和固定值，拆成background-image、background-position单独声明更可控
最麻烦的点在于：你没法一边用 var(--angle) 控制方向，一边又指望 linear-gradient() 动起来——这个组合从规范层面就被堵死了。要么换思路，要么降级处理，没有中间态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
