必须用@property声明--hue变量并设关键帧为0→720，否则浏览器将360视为0导致跳变；需固定饱和度与明度，且S≥20%、L∈[15%,85%]才能确保人眼可见丝滑色相流动。
不能靠手动改 hsl() 的第一个参数实现“旋转动画”——它不是旋转，只是跳帧；真要精准、丝滑、可复现的色相旋转动画，必须用 @property + --hue 变量 + 跨 360° 关键帧。
为什么直接写 hsl(0, 100%, 60%) → hsl(360, 100%, 60%) 会卡住或闪一下
浏览器把 360 和 0 当作同一值，关键帧完全相同，动画引擎直接跳过过渡；更关键的是，--hue 变量默认不可动画，CSS 不知道该插值什么类型。结果就是：没动画、颜色突变、DevTools 里看到 hsl(NaN, 100%, 60%) 或回退成黑色。
- 必须用
@property显式声明：@property --hue { syntax: '<number>'; inherits: false; initial-value: 0; } - 关键帧终点不能是
360，得写720或1080，让插值有足够跨度，避免在边界处折返失真 - 动画属性必须作用在最终颜色上，比如
background-color: hsl(var(--hue), 100%, 60%);，而不是只改变量本身
如何用 @keyframes 驱动色相连续旋转不跳变
色相插值是线性的，但人眼对色轮是环状感知。从 0 直接到 360，浏览器认为“没变”，而从 0 到 720，它会算出中间所有 0.5、1.2、359.8 这类值，真正走完两圈。
- 写法示例：
@keyframes rotate-hue { 0% { --hue: 0; } 100% { --hue: 720; } } - 元素上必须设初始值：
.element { --hue: 0; animation: rotate-hue 6s linear infinite; } - 饱和度和明度务必固定（如
100%和60%），否则hsl()插值会被其他通道干扰，出现发灰、褪色现象
怎样让多个颜色同步旋转，比如渐变里的两个端点
单色流动感弱，真“流动”需要多个色相点同向偏移且保持相对差值稳定。例如左红右蓝（H=0 和 H=240）→ 左橙右青（H=30 和 H=270），差值始终是 240。
立即学习“前端免费学习笔记（深入）”；
- 定义两个变量：
--hue-start和--hue-end，都加@property声明 - 关键帧同步递增：
0% { --hue-start: 0; --hue-end: 240; } 100% { --hue-start: 720; --hue-end: 960; } - 背景写成：
background: linear-gradient(to right, hsl(var(--hue-start), 100%, 60%), hsl(var(--hue-end), 100%, 60%)); - 漏掉任意一个
@property，对应端点就静止不动
容易被忽略的兼容性与性能细节
@property 在 Safari 16.4+ 和 Chrome 102+ 支持良好，但 Firefox 目前仍不支持——这意味着纯 hsl() 变量动画在 Firefox 里直接失效，得配降级方案（比如 fallback 到 filter: hue-rotate() 或静态色）。
-
will-change: background-color对这类动画帮助有限，真正起效的是 GPU 加速的filter或transform；hsl()动画本质还是重绘，长列表慎用 - 别在伪元素里重复写整条
hsl(var(--hue), ...)，提取成--color: hsl(...)没用——CSS 不支持变量存函数调用结果 - 调试时用 DevTools 的 color picker 实时拖动色相滑块，比反复改数字快得多，也能直观确认当前渲染值是否符合预期
