应选 linear；它实现匀速渐变，避免 ease-in-out 的起点终点停顿和 ease 的循环衔接顿挫，配合 hsl(0→359) 能确保色相平滑旋转且无跳变。
animation-timing-function 选 ease-in-out 还是 linear？
颜色循环动画是否平滑，关键不在 @keyframes 里写了几个色值，而在于过渡节奏。用 ease-in-out 会让颜色在起点和终点“停顿感”变强，看起来像呼吸灯——有始有终，但不匀速；linear 才真正实现匀速渐变，视觉上更连贯、更“循环”。多数人误以为越慢越平滑，其实卡顿常来自加减速突变。
- 背景色循环属于纯数值插值（HSL 或 RGB），
linear最贴合物理直觉 - 如果搭配
hsl()使用，linear能避免色相跳变（比如从hsl(359, 100%, 50%)到hsl(0, 100%, 50%)） - 千万别用
ease（默认值）——它在两端减速，循环衔接处会明显“顿一下”
用 hsl() 写 keyframes 比 rgb() 更稳
rgb() 插值是按通道独立计算的，红→绿→蓝之间会经过大量灰褐脏色；hsl() 控制色相（h）单变量变化，就能干净绕完一圈。但要注意：浏览器对 hsl() 的色相插值默认走“短弧”，h: 0 → 360 实际不会动，因为 0 和 360 被视为同一值。
- 写成
h: 0 → 359或h: -1 → 359，强制触发完整旋转 - 饱和度（
s）和亮度（l）保持固定，否则会引入意外明暗抖动 - 示例：
@keyframes hue-rotate { from { background-color: hsl(0, 100%, 60%); } to { background-color: hsl(359, 100%, 60%); } }
animation-duration 设太短会触发渲染丢帧
低于 200ms 的 animation-duration 在中低端设备上极易掉帧，尤其当页面已有其他动画或滚动时。不是“越快越酷”，而是快到浏览器来不及提交每一帧，结果反而闪烁、卡顿。
- 安全下限建议设为
300ms，兼顾感知速度与稳定性 - 若需更快节奏，改用
animation-iteration-count: infinite+animation-duration: 800ms，靠频率而非单次速度营造动感 - 别忘了加
will-change: background-color（仅对支持该属性的浏览器），提示合成层优化
background-color 动画无法硬件加速？得换思路
直接给 background-color 加 animation 是纯 CPU 渲染，每帧都要重绘整个元素区域。真要平滑，得绕过这个限制：用伪元素叠加一层渐变遮罩，只动画它的 transform: translateX() 或 opacity，这两者可进合成层。
立即学习“前端免费学习笔记（深入）”；
- 更轻量的做法：用
background-image: linear-gradient(...)+background-position动画，配合background-size控制循环密度 - 注意
background-position必须用像素或百分比，不能用vw/vh（会导致频繁重排） - 示例片段：
background: linear-gradient(90deg, #f00, #0f0, #00f, #f00); background-size: 300% 100%; animation: bg-scroll 4s linear infinite;
hsl(0) 和 hsl(360) 看似一样，但动画引擎可能直接跳过变化。多试一次 359，比调十遍 timing-function 更管用。 
