因为RGB线性插值会强制三通道独立变化，从红到蓝必经紫灰等非预期中间色；而HSL通过环状色相与@property声明可触发最短弧线插值，全程保持高彩度，但需正确使用deg单位、控制饱和度60%–90%和明度30%–70%。
为什么CSS颜色动画用RGB会出灰阶断层
浏览器对 color 或 background-color 的过渡默认走 RGB 空间线性插值，这不是 bug，是规范行为。但人眼对色彩的感知不是按立方体坐标走的——从 rgb(255, 0, 0)（红）到 rgb(0, 0, 255)（蓝），R 和 B 通道必须同步衰减/增强，G 始终为 0，中间必然密集经过 rgb(128, 0, 128)（紫灰）、rgb(64, 0, 192)（浊蓝）等非预期色。这些不是“过渡色”，而是插值路径上的数学必经点。
为什么HSL能绕开灰阶，前提是写法正确
HSL 的色相 h 是 0–360° 的环状值，浏览器插值时自动选最短弧线（比如 hsl(355deg, 90%, 60%) → hsl(5deg, 90%, 60%) 走 +10°，而非 -350°），全程保持高彩度。但注意：仅写 hsl() 值不等于启用 HSL 插值——浏览器仍按 RGB 解析，除非你用 @property 显式声明变量类型：
@property --bg-hue {
syntax: "<angle>";
inherits: false;
initial-value: 240deg;
}
再配合 background-color: hsl(var(--bg-hue), 90%, 50%) 才真正触发 HSL 空间插值。否则，hsl(0, 100%, 50%) → hsl(120, 100%, 50%) 在旧版 Safari 或未注册 property 的环境里，照样走 RGB 断层路径。
HSL动画失效的三个典型配置错误
- 漏写
deg单位：写成hsl(355, 90%, 60%)而非hsl(355deg, 90%, 60%)，部分 Safari 版本（≤16.3）会降级为 RGB 插值 - 饱和度或明度设错：
s低于 20% 时，色相再怎么动也只剩灰阶；l卡在 5% 或 95% 附近，颜色趋近黑/白，动画变成明暗闪烁 - 没控制跨度节奏：人眼对 ±5° 色相变化几乎不可辨，但跨 60° 就明显跳色——不是插值问题，是生理限制。动画中若需平滑，H 增量建议 ≤30°/s，避免“闪”感
兼容性与降级策略怎么写才不翻车
@property 目前支持 Chrome 107+、Safari 16.4+、Firefox 111+。对不支持的环境，别 fallback 到 rgb()——那样直接退回断层。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 检测
CSS.supports('property', '--test')，不支持时改用requestAnimationFrame手动更新hsl()字符串（注意归一化 h 值：365° → 5°） - 或干脆降级为静态色变（如 hover 只改明度
l，不动h），至少避免脏色 - 所有 HSL 值统一用
deg、%单位，别混用无单位数字，DevTools 里一眼能看出是否被识别为 angle 类型
真正让 HSL 动画“自然”的，从来不是模型本身，而是你有没有把色相当角度管、把饱和度和明度当阈值控、把浏览器能力当开关用。
