transition 不支持 lch/hsl 插值，浏览器强制转为 srgb 线性插值；唯一可行方案是拆解 lch 分量为自定义属性并用 @property 分别声明动画。
直接用 transition 做颜色过渡，浏览器默认按 RGB 空间线性插值，这不是“非线性”的问题，而是根本没走你想要的色彩空间路径——比如 HSL 或 LCH。Color Level 5 提出的插值算法（如 color-mix()、color() 函数、lch() 插值）目前**尚未被任何浏览器用于 transition 的自动插值逻辑中**。
为什么 transition 不会用 LCH/HSL 插值
即便你写 background-color: lch(50% 80 270); → lch(70% 40 30)，浏览器仍会把这两个 LCH 值先转成 sRGB，再在 RGB 空间做线性混合。这是 CSS Transitions 规范第 2 级（CSS Transitions Level 2）明确规定的：所有颜色属性过渡必须基于「计算后的已解析颜色值」，而当前唯一被广泛支持的解析目标是 sRGB。
-
color-mix(in lch, red, blue)只能在声明时静态计算，不能参与transition -
@property声明--hue并绑定到hsl(var(--hue), ...)是目前唯一能逼近 HSL 插值的方式，但它不等于 Color Level 5 的 LCH 路径 - Chrome Canary 和 Safari Tech Preview 已支持
color(display-p3 ...)，但 display-p3 插值依然走 RGB 底层，不是感知均匀空间
真正可用的非线性颜色过渡方案
想绕过 RGB 插值缺陷，只能放弃让浏览器自动插值，改用可控分段或 JS 驱动：
- 用
steps(12, end)搭配预设的 12 个 LCH 值（手动算好或用工具生成），通过 CSS 自定义属性切换：--bg-l: 50%; --bg-c: 80; --bg-h: 270deg;→--bg-l: 70%; --bg-c: 40; --bg-h: 30deg; - 配合
@property声明每个变量为syntax: "<number>"</number>或"<angle>"</angle>，再用transition: --bg-l 0.6s, --bg-c 0.6s, --bg-h 0.6s—— 这样浏览器会对每个数字/角度单独插值，再组合成lch()，效果接近 LCH 路径 - 若需全兼容，用
requestAnimationFrame+color.js库实时计算 LCH 插值帧，逐帧写入style.backgroundColor；注意避免 layout thrashing，只更新color或background-color
color() 函数和 transition 能一起用吗
不能。color(srgb 0.5 0.2 0.8) 或 color(display-p3 0.9 0.1 0.3) 是合法颜色值，但它们仍是「最终解析为 RGB 的中间表示」，浏览器不会因你写了 color() 就切换插值空间。更关键的是：color() 中的通道值（如 0.5）是浮点数，无法被 @property 直接声明为可动画类型（syntax: "<number>"</number> 支持，但需手动拆通道）。
- 写
transition: background-color 0.4s时，起始和结束若都是color(...)，浏览器仍做 RGB 插值 - 想强制 LCH 插值，必须把 LCH 的三个分量（L、C、H）拆成独立自定义属性，并分别声明
@property，再用background-color: lch(var(--l) var(--c) var(--h)) - 这种写法在 Chrome 107+ / Safari 16.4+ 可行，Firefox 仍不支持
@property对颜色分量的动画
真正麻烦的不是写法，而是你得接受：Color Level 5 的插值愿景，目前只活在静态计算（color-mix）、函数调用（color()）和未来动画规范草案里；transition 还卡在 RGB 时代。要落地，就得手动拆、手动控、手动降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
