现代CSS中如何用@property实现渐变背景平滑过渡动画？-css教程-PHP中文网

background-image 无法直接过渡，因 CSS 规范禁止对类型插值；需用 @property 声明 --grad-start 和 --grad-end 等可动画变量，并在 transition 中指定这些变量。

现代css中如何用@property实现渐变背景平滑过渡动画？

直接用 background-image 过渡渐变会完全失效——这不是你写错了，是 CSS 规范本身禁止对类型插值。真正能平滑过渡的，只有被 @property 显式声明为可动画类型的自定义属性。

为什么 transition: background-image 无效

浏览器看到 linear-gradient(45deg, red, blue) 和 linear-gradient(45deg, green, purple) 两个字符串，不会尝试“混合”它们，而是直接跳变。这不是 bug，是规范行为。DevTools 里能看到 transition 属性灰掉，CSS.supports('property', '--x') 返回 false 就说明注册失败。

syntax 必须带引号、小写、尖括号完整，比如 ""，写成 "color" 或都不认
inherits: false 缺失会导致变量在子元素中被继承覆盖，动画中断
initial-value 必须是合法值，currentcolor 或未定义变量会静默失败

线性渐变颜色过渡的最小可行写法

要让起点色和终点色都平滑变化，必须分别声明两个可动画变量，并在 background 中用 var() 引入：

@property --grad-start { syntax: "<color>"; inherits: false; initial-value: #ff6b6b; }
@property --grad-end { syntax: "<color>"; inherits: false; initial-value: #4ecdc4; }

.gradient-box {
  background: linear-gradient(45deg, var(--grad-start), var(--grad-end));
  transition: --grad-start 0.5s ease, --grad-end 0.5s ease;
}

.gradient-box:hover {
  --grad-start: #4ecdc4;
  --grad-end: #ff6b6b;
}</color></color>

注意：transition 必须写在 --grad-start 和 --grad-end 上，而不是 background；hover 时改的是变量值，不是 background 声明本身。