CSS色相动画需用自定义属性+HSL函数实现，直接改background-image不触发重绘；hue值应设为0→720保证循环平滑；伪元素需显式设置content、display和尺寸；旧浏览器或复杂交互需JS替代。
background-image 渐变色相动画为什么不动
直接用 background-image: linear-gradient(...) 配合 @keyframes 改 hsl() 色相，浏览器不会重绘——因为渐变本身是静态图像值，CSS 动画不触发它的实时计算。
必须把色相变量抽出来，用 CSS 自定义属性 + background-image 内联计算，才能让动画生效。
- 错误写法：
@keyframes rotate-hue { to { background-image: linear-gradient(hsl(360, 100%, 50%), ...); } }—— 不触发重绘 - 正确路径：定义
--hue: 0，在background-image中用hsl(var(--hue), 100%, 50%)，再对--hue动画 - 注意：Chrome 115+、Firefox 119+、Safari 16.4+ 才支持在
hsl()里用var(--x)；旧版本需 fallback 到 JS 控制
用 @keyframes 动色相时 hue 值怎么设才顺滑
HSL 的 hue 是 0–360 的循环值，直接从 0 动到 360 会在终点跳回起点，产生视觉卡顿。
要让色相真正“循环”，得让动画关键帧的 hue 值跨过 360 边界，比如从 0 → 720，浏览器会自动取模并插值出连续过渡。
立即学习“前端免费学习笔记（深入）”；
0% { --hue: 0; }-
100% { --hue: 720; }—— 别写360，否则 Safari 可能不平滑 - 动画时长建议 ≥ 8s，太快人眼会感知到色阶跳跃（尤其低色深屏幕）
- 避免在
ease-in-out下做色相动画，用linear更稳；色相本身是循环量，无需模拟物理惯性
CSS 变量 + HSL 动画在伪元素上失效的常见原因
给 ::before 或 ::after 设置带 var(--hue) 的渐变背景，结果没反应——大概率是伪元素没尺寸或没内容。
- 伪元素默认
display: inline，且无宽高，background-image无法渲染 - 必须显式设置
content: ""+display: block（或inline-block）+ 宽高/定位 - 如果父元素用了
transform或will-change，某些 Chrome 版本会跳过伪元素的自定义属性继承，可加contain: paint强制更新 - 不要在伪元素上用
inherit想法去拿父级--hue，它默认就继承，问题只出在渲染条件不满足
要不要用 JS 替代纯 CSS 方案
纯 CSS 色相动画在现代浏览器够用，但遇到以下情况就得切 JS：
- 需要和滚动、鼠标位置联动（比如滚到哪段变什么色），CSS 无法读取运行时状态
- 要兼容 IE 或老 Android Webview（
hsl(var(--x))完全不支持） - 动画需暂停/倒放/动态变速，CSS
animation-play-state控制粒度太粗 - 性能敏感场景：大量元素同时跑色相动画，CSS 方案可能触发频繁重排；JS +
requestAnimationFrame+transform合成层更可控
真正容易被忽略的是：色相动画在 OLED 屏幕上长时间静止显示同一组渐变，有轻微烧屏风险。如果产品面向 ToB 或数字标牌，得加定时偏移或亮度抖动逻辑——这已经超出 CSS 能力范围了。
