background-color 循环动画必须用 @keyframes 显式定义颜色帧并设 infinite，transition 仅响应属性变化无法循环；需统一颜色格式（如全 hsl）、避免 hex 与 rgb 混用；推荐 hsl 色相线性过渡实现彩虹效果；CSS 变量可控制时长、延迟、起始色相，但 @keyframes 内不可直接 var()；IE 和旧 Safari 不支持，需降级或 @supports 回退；卡顿多因重排、颜色空间跳跃或误用 will-change。
background-color 动画必须用 @keyframes 定义颜色序列
直接对 background-color 设置 transition 无法实现循环，它只响应属性变化（比如 hover 触发），而循环需要定时驱动。真正可行的路径是：用 @keyframes 显式写出颜色帧，再通过 animation 启动并设为 infinite。
常见错误是把渐变色或半透明色写错格式，导致动画卡在第一帧——rgba() 和 hsl() 都支持动画，但 hex（如 #ff0）不能和 rgb() 混搭，浏览器无法插值。
- 必须保证所有关键帧里的颜色格式一致（全用
hsl(0, 100%, 50%)或全用rgb(255, 0, 0)） - 至少定义两个
from/to或带百分比的帧（如0%, 50%, 100%），否则动画无变化 - 推荐用
hsl()：色相（h）可线性过渡，方便做彩虹循环，比如hsl(0, 100%, 60%) → hsl(360, 100%, 60%)
```css
@keyframes hue-rotate {
0% { background-color: hsl(0, 100%, 60%); }
100% { background-color: hsl(360, 100%, 60%); }
}
.box {
animation: hue-rotate 4s linear infinite;
}
```用 CSS 变量控制动画节奏和起始点，避免重写 @keyframes
硬编码在 @keyframes 里的数值（如时长、延迟、色相偏移）一旦要改，就得全局搜索替换。更灵活的方式是：把可变参数抽成 CSS 变量，在动画中用 calc() 或函数式语法间接引用——注意：@keyframes 内部**不能直接使用 var(--x)，但可以靠外部变量 + 自定义属性“注入”效果。
实际做法是：用变量控制元素的 animation 属性值，或结合 animation-delay / animation-duration 做微调；更进一步，用 hsl() 的色相值绑定变量，再用 JS 或伪类动态更新变量，就能实现运行时换主题色而不重载动画逻辑。
立即学习“前端免费学习笔记（深入）”；
-
--anim-duration: 3s→ 在元素上写animation-duration: var(--anim-duration) - 想让多个元素错峰播放？给每个加不同
--anim-delay，然后animation-delay: var(--anim-delay) - 色相循环起点可控：定义
--hue-start: 90，再用hsl(calc(var(--hue-start) + 0), ...)和hsl(calc(var(--hue-start) + 360), ...)构建帧（需确保 calc 结果合法）
IE 和旧版 Safari 不支持 background-color 在 @keyframes 中动画
IE 完全不支持 background-color 的关键帧动画（会静止在初始色），iOS Safari ≤ 12.5 对 hsl() 插值也有渲染毛刺。这不是写法问题，是引擎限制。
如果必须兼容，有两个务实选择：
- 降级为
opacity切换多个纯色div层叠，用z-index+animation控制显隐（性能稍差但 100% 兼容） - 检测支持性后加载回退样式：
@supports not (animation: test 1s) { .box { background-color: #333; } } - 慎用
will-change: background-color：现代浏览器可能优化，但旧引擎反而卡顿，实测 iOS Safari 11–12 开启后动画掉帧明显
动画卡顿？检查是否触发了重排或颜色空间突变
表面上只是背景色动，但如果父容器有 transform: scale(1.001) 或子元素含 position: absolute 且尺寸依赖背景，就可能让浏览器放弃 GPU 加速，退到 CPU 渲染，帧率骤降。
另一个隐形坑是颜色空间跳跃：比如从 hsl(0, 100%, 50%) 直接到 rgb(0, 255, 255)，浏览器无法平滑插值，会跳变或闪烁。所有帧必须落在同一颜色模型内，且亮度/饱和度别剧烈波动（人眼对明暗变化比色相更敏感）。
- 用
chrome://flags/#smooth-scrolling关闭平滑滚动测试真实帧率 - 动画期间打开 DevTools 的 Rendering 面板，勾选 “Paint flashing”，看是否整块重绘（红色闪动）
- 优先用
will-change: transform占位而非background-color，哪怕只是transform: translateZ(0)
CSS 变量本身不参与动画计算，它只是个“开关”或“参数槽位”；真正决定丝滑与否的，是颜色格式一致性、浏览器对插值的支持粒度，以及你有没有无意中把动画绑在布局敏感属性上。
