background-color 动画不生效主因是颜色格式不统一或插值失败；须统一用 rgb() 或 hsl()、显式一致透明度、避免混用颜色模型、关键帧格式严格对齐，并用 will-change 或 transform 触发硬件加速。
background-color 动画不生效？检查是否用了不支持插值的颜色格式
CSS 动画对 background-color 做平滑过渡，前提是起始和结束颜色必须能被浏览器线性插值。常见坑是用了 hsl() 或 hex 但混入了不透明度不一致的写法，比如 #ff0000 和 rgba(255,0,0,0.8) —— 浏览器无法在不同颜色模型间插值，动画会跳变或卡死。
- 统一用
rgb()或hsl()，避免混用hex和rgba() - 透明度必须显式一致：都用
rgba()，或都用rgb()+opacity（但注意opacity会影响子元素） - 别用
currentColor或 CSS 变量未定义值做关键帧颜色，它们在动画中可能被解析为invalid导致中断
@keyframes 中颜色值写错顺序，动画会“闪一下”就停
CSS 动画要求每个 @keyframes 规则里，所有关键帧的属性类型和格式必须严格对齐。如果 0% 写了 hsl(0, 100%, 50%)，而 100% 写成 #ff0000，部分浏览器（尤其是 Safari）会在首帧强制 fallback 到初始色，造成明显闪烁。
- 所有关键帧用相同函数：全
hsl()或全rgb() - 数值范围要合理：
hsl()的色相（H）建议用 0–360 整数，避免小数导致渲染抖动 - 测试时加
animation-iteration-count: 1，确认单次行为再设infinite
循环变色卡顿？优先用 will-change 和硬件加速
频繁更新 background-color 属于重绘（repaint）操作，尤其在低端设备或复杂布局下容易掉帧。单纯靠 animation-timing-function: linear 不能解决性能问题。
- 给动画元素加
will-change: background-color，提示浏览器提前准备图层 - 更可靠的方式是触发 GPU 加速：加
transform: translateZ(0)或opacity: 0.99（不影响视觉） - 避免在
:hover或滚动中动态启停该动画，会造成图层重建，反而更卡
兼容性陷阱：IE 和旧版 Safari 不支持 hsl() 动画插值
IE 完全不支持 hsl() 在 @keyframes 中的动画；iOS Safari ≤ 13.3 对 hsl() 色相跨 360° 的插值（如从 hsl(350, ...) 到 hsl(10, ...)）会走捷径，变成反向跳变。
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 IE？只能用
rgb()+ JavaScript 补间，或放弃平滑循环 - 要跨 360° 平滑转色（比如红→橙→黄→绿→蓝→紫→红），改用
hsl()色相累加：在100%写hsl(370, 100%, 50%)，而非hsl(10, 100%, 50%)—— 多数现代浏览器能识别这种“溢出”并正确插值 - 上线前务必在真机 iOS Safari 上测一圈，模拟器不一定暴露问题
最麻烦的不是写对 keyframes，而是颜色空间选择、浏览器插值策略、硬件加速触发这三者的组合效果——同一段代码，在 Chrome DevTools 里丝滑，切到 Safari 真机就跳帧，这种情况太常见了。
