hsl() 是实现平滑循环色相动画的唯一可靠方案，需用 0→360 线性插值、避免混用色彩模型、提供 rgb fallback 并真机实测。
color-mix() 在动画中无法直接循环色相？用 hsl() 更可靠
CSS 原生不支持“把一个颜色自动按色相环循环变化”，color-mix() 也不能动态插值色相——它只做静态混合，且不理解 HSL 的角度连续性。真要实现平滑、无限循环的色相动画，必须用 hsl() 函数手动控制 h（色相）参数。
- 浏览器对
hsl(0, 100%, 50%)到hsl(360, 100%, 50%)的动画天然支持无缝过渡，因为 CSS 动画引擎会自动选择最短路径（比如从 359° 到 0° 不会倒退一圈） - 别写
hsl(360, ...)当终点——虽然合法，但部分旧版 Safari 会把它当 0° 处理导致跳变；统一用hsl(0, ...)开始、hsl(360, ...)结束更稳 - 避免混用
rgb()和hsl()在同一动画关键帧里，会导致浏览器降级为离散插值，色相跳变明显
animation-timing-function 影响色相过渡是否“匀速”
色相是角度值，但默认 cubic-bezier(.25,.1,.25,1)（ease）会让 0°→360° 看起来先慢后快再慢——这不是错觉，是曲线本身非线性。要真正匀速旋转色相，必须显式指定 linear。
-
animation-timing-function: linear是必须项，否则色相动画会有明显加速/减速感 - 不要依赖
steps()模拟循环——它会产生卡顿的阶跃效果，和“流畅循环”目标冲突 - 如果想加一点呼吸感（比如加载中微微脉动），可在
linear基础上叠加小幅度scale动画，但色相主轴仍保持线性
@keyframes 中 hsl() 色相值写 0 还是 360？
写 0 或 360 都可以，但必须首尾一致且覆盖完整周期。CSS 动画对色相的插值逻辑是：取两个角度差的最小绝对值路径，所以 0 → 360 和 360 → 720 效果一样，但 0 → -360 会反向转一圈。
- 推荐写法：
from { background-color: hsl(0, 100%, 60%); } to { background-color: hsl(360, 100%, 60%); } - 禁止写法：
from { hsl(0, ...) } to { hsl(-360, ...) }—— 触发逆向旋转，肉眼可见卡顿 - 如果动画需暂停在中间态（比如 loading 暂停），用
animation-play-state: paused，别靠改 keyframes 值硬停，否则恢复时可能跳帧
兼容性与 fallback：IE 和旧安卓 WebView 怎么办
IE 完全不支持 hsl() 动画（甚至不支持 hsl() 本身），旧安卓 WebView（≤4.4）对 hsl() 插值支持也不稳定。不能只靠现代语法兜底。
立即学习“前端免费学习笔记（深入）”；
- 必须提供
rgb()或十六进制 fallback：在@keyframes外层先定义background-color: #ff0000，再用@supports (color: hsl(0 0% 0%))包裹动画规则 - 别用
hsla()试图兼容透明度——老引擎解析hsla()更容易出错；透明度单独用opacity动画更稳妥 - 测试重点不是“动没动”，而是“动得顺不顺”：在真机上拖动 timeline 查看是否有色相跳变或帧率抖动
色相循环真正的难点不在写法，而在验证——人眼对色彩连续性极其敏感，哪怕 1 帧跳变都明显。别信预览器，务必在目标设备上实测滚动暂停再恢复的场景。
