答案：通过设置 transition 属性并配合 ease-in-out 等缓动函数，可实现 background-color 的平滑渐变；避免使用 background-image 渐变动画以提升性能。
在使用 :hover 实现背景色渐变时，如果直接通过 CSS 的 background-color 切换颜色，浏览器不会自动添加过渡效果，导致颜色变化生硬甚至出现卡顿感。要实现平滑的背景色渐变，关键在于正确使用 transition 和 timing-function。
启用 background-color 过渡动画
为了让背景色在鼠标悬停时平滑变化，必须为元素设置 transition 属性，明确指定对 background-color 做过渡处理。
.button {
background-color: #007bff;
transition: background-color 0.3s;
}
.button:hover {
background-color: #0056b3;
}
这样，背景色会在 300 毫秒内平滑过渡，避免瞬间切换带来的卡顿感。
优化缓动函数提升流畅感
默认的过渡速度是线性的（linear），看起来机械。使用更自然的 timing-function 可以让动画更顺滑。
立即学习“前端免费学习笔记（深入）”；
推荐缓动函数：
-
ease-in-out：开始和结束缓慢，中间加速，视觉更舒适 -
cubic-bezier(0.4, 0, 0.2, 1)：自定义曲线，类似 Material Design 的流畅反馈
.button {
background-color: #007bff;
transition: background-color 0.3s ease-in-out;
}
避免使用 background-image 渐变导致性能问题
如果使用 linear-gradient 作为背景，直接过渡可能不生效或卡顿，因为 CSS 不支持渐变之间的插值动画。
- 改用纯色到纯色的
background-color过渡 - 如需渐变效果，可结合伪元素 + opacity 淡入淡出，避免动态计算渐变
提升渲染性能的小技巧
某些情况下即使设置了 transition 仍感觉卡顿，可能是重绘开销大。
建议：- 给过渡元素添加
will-change: background-color提示浏览器提前优化 - 避免同时过渡多个属性，聚焦在关键视觉变化上
- 在低性能设备上可缩短过渡时间至 0.2s~0.25s
基本上就这些。合理使用 transition 配合缓动函数，能有效解决 hover 背景色变化卡顿的问题，让交互更自然流畅。
