必须用@property声明色相变量并跨720°关键帧，因hsl(0)与hsl(360)被视作相同值导致动画跳变；需配合linear-gradient、background-position及双色相变量实现轮播感；注意单位、兼容性降级和will-change优化。
必须用 @property 声明变量 + 跨 360° 关键帧 + hsl() 动态计算，否则动画会在 360° 处跳变或直接不执行。
为什么直接写 0% { background-color: hsl(0, 100%, 60%) } → 100% { background-color: hsl(360, 100%, 60%) } 会卡住
浏览器把 hsl(0, ...) 和 hsl(360, ...) 视为完全相同值，关键帧“无变化”，动画引擎直接跳过过渡；更关键的是，background-color 本身不支持对自定义 CSS 变量做插值——除非你显式告诉浏览器这个变量可动画。
-
--hue必须用@property注册：@property --hue { syntax: '<number>'; inherits: false; initial-value: 0; }</number> - 关键帧不能停在 360，得跨边界写成
0% { --hue: 0 }→100% { --hue: 720 }，让色相转两圈，插值才连续 - 动画目标必须是
background-color: hsl(var(--hue), 100%, 60%)，不是直接写死的hsl(0, ...)值
如何用单个变量实现真正“轮播感”的流动色带
纯 background-color 动画只是整块变色，没有视觉上的“流动”；要模拟轮播色带（比如彩虹条从左往右滑过），得靠 linear-gradient + background-position 配合色相变量驱动。
- 定义两个同步偏移的色相变量：
--hue-start和--hue-end，都注册@property - 渐变背景写成：
background: linear-gradient(90deg, hsl(var(--hue-start), 100%, 60%), hsl(var(--hue-end), 100%, 60%));
- 在
@keyframes中同向递增：0% { --hue-start: 0; --hue-end: 120; }→100% { --hue-start: 720; --hue-end: 840; } - 加上
background-size: 200% 100%和background-position: 0 0，再动画background-position-x，就能叠加位移+色相双流动
兼容性与降级必须手动处理，CSS 不会自动 fallback
@property 在 Safari 15.4+、Chrome 100+、Firefox 119+ 才稳定支持；旧版浏览器里，变量不可动画，整段动画直接静默失效——这不是 bug，是规范未就绪。
- 别指望
@supports检测@property，它目前无法可靠判断（CSS.supports('property', '--x')返回false即使已注册） - 实际可用的检测方式是：
if (typeof CSS !== 'undefined' && CSS?.propertyRegistry?.register)
- 不支持时，用
requestAnimationFrame手动更新element.style.setProperty('--hue', value)，并控制帧率在 60fps 内 - 务必加
will-change: background;，否则高频更新--hue会导致重绘抖动
最容易被忽略的一点：所有 hsl() 里的饱和度和亮度必须带 % 单位，写成 hsl(120, 100, 60) 会整个声明失效，最终渲染成透明或继承色——你看到的“没动”，其实是根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
