纯css可用@keyframes实现背景色循环渐变动画，需用hsl模式固定饱和度与明度、色相连续变化，并确保0%与100%起止色一致；background-color不支持linear-gradient，因其属不可动画属性。
如何用 @keyframes 实现背景色循环渐变动画
直接说结论：纯 CSS 可以实现，但必须用 background-color 的多色关键帧（不能写成“从红到蓝到绿”这种模糊描述），且浏览器对颜色插值是线性处理的，中间过渡可能发灰——这不是 bug，是 RGB 空间插值的固有表现。
常见错误是把渐变色（linear-gradient）当普通颜色塞进 @keyframes，结果动画完全不生效。因为 background-color 只接受单色值（如 #ff0000、rgb(255,0,0)、hsl(0,100%,50%)），不支持渐变图像。
- 想用渐变图做动画？得用
background-image+animation，但 CSS 无法直接动画化linear-gradient的色标位置或角度（除非用background-position配合重复渐变） - 真正能平滑动画的是
background-color，所以推荐用 HSL 模式写 keyframes：色相（hsl(h, s, l)）连续变化时，视觉更均匀 - 别用十六进制写 4 个颜色点，容易漏掉 0% 和 100% 的衔接；起止色必须一致，否则循环会跳变
@keyframes 中 HSL 色相轮播的关键写法
HSL 的 h 值范围是 0–360，设 0% 和 100% 都为 hsl(0, 100%, 60%)，中间插入 33%、66% 两个关键帧，分别设为 hsl(120, 100%, 60%)、hsl(240, 100%, 60%)，就能形成红→绿→蓝→红的闭环。
注意饱和度（s）和明度（l）要固定，否则颜色会“发白”或“变暗”，破坏节奏感。
```css
@keyframes hue-rotate {
0% { background-color: hsl(0, 100%, 60%); }
33% { background-color: hsl(120, 100%, 60%); }
66% { background-color: hsl(240, 100%, 60%); }
100% { background-color: hsl(0, 100%, 60%); }
}
```
- 动画时长建议 ≥ 8s，太快人眼跟不上色相变化，易眩晕
- 用
animation-timing-function: linear，避免默认ease导致停顿感 - 别在
body上直接套这个动画——滚动时重绘压力大，优先绑定到固定尺寸的容器元素上
为什么 linear-gradient 不能直接放进 @keyframes
因为 background-image 属于“不可动画属性”（non-animatable property），CSS 动画规范明确列出它不在可插值列表里。你写：
```css
@keyframes bad {
0% { background-image: linear-gradient(red, yellow); }
100% { background-image: linear-gradient(blue, green); }
}
```
结果就是：0% 时刻显示第一个渐变，100% 时刻瞬间切到第二个，中间无过渡——浏览器根本不会尝试插值。
- 替代方案一：用两层元素叠在一起，分别设不同渐变，再用
opacity交叉淡入淡出（需额外 DOM 和 JS 控制节奏） - 替代方案二：用 SVG
<defs></defs>+<animate></animate>，但兼容性和维护成本高 - 最简解：放弃“渐变图动画”，改用纯色轮播+伪元素模拟层次感（比如加个半透明黑色遮罩层再 animate opacity）
移动端 Safari 的兼容性坑
iOS 15.4 之前，Safari 对 background-color 的 HSL 动画支持不稳定，尤其在页面滚动或切换 tab 后，动画可能卡住或重置。不是代码问题，是渲染管线休眠导致的。
- 临时缓解：加一句
will-change: background-color，但别滥用，会触发额外图层合成 - 更稳妥做法：检测
WebKit内核，对 iOS 用户降级为静态渐变背景 + 微弱 pulse 动画（比如transform: scale(1.005)） - 真要保 iOS 全版本流畅？老老实实用 JavaScript +
requestAnimationFrame控制style.backgroundColor，绕过 CSS 动画限制
颜色空间的选择、关键帧密度、硬件加速触发时机——这些细节不调好，看着像动了，其实卡顿肉眼可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
