CSS background-image（含渐变）不支持transition，因无法插值；推荐双层opacity方案或Chromium 115+的@property自定义属性动画。
transition 对 background-color 有效，但对 background-image（含渐变）无效
直接写 transition: background 0.3s 或 transition: background-image 0.3s，在 Chrome/Firefox 中基本没反应——这不是你写错了，是浏览器规范限制：CSS background-image 不支持插值过渡，渐变属于图像范畴，无法像颜色那样计算中间帧。
真正能平滑过渡的，只有 background-color、color、opacity 这类可数值化计算的属性。
- 想让渐变“动起来”，得绕开
background-image，改用两个叠层元素 +opacity切换 - 或用
background-color搭配半透明白色遮罩模拟“渐变变亮”效果 - 现代方案：用
@property+background自定义属性（需 Chromium 115+，Firefox 尚不支持）
用两层 background-color + opacity 实现近似渐变悬停
这是兼容性最好、实操最稳的方案。原理是：底层放一个固定渐变背景，上层用纯色（如白色）+ opacity 控制透明度，悬停时降低上层 opacity，让底层渐变逐渐透出。
.btn {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
position: relative;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background-color: white;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.btn:hover::before {
opacity: 0;
}
- 必须加
position: relative和伪元素定位，否则层叠失效 -
inset: 0比top/left/bottom/right: 0更简洁，但 IE 不支持；如需兼容 IE，改用四方位写法 - 上层颜色选中性灰/白/黑，避免色偏；若底层是深色渐变，上层建议用黑色 + 低 opacity
Chrome 115+ 可用 @property 做真渐变过渡（但别现在就上）
如果你只跑最新 Chromium 内核（比如 Electron 25+ 或内部管理平台），可以尝试 CSS 自定义属性动画。它把渐变起点/终点颜色抽成可动画变量，再用 transition 驱动。
@property --grad-start {
syntax: '<color>';
inherits: false;
initial-value: #6a11cb;
}
@property --grad-end {
syntax: '<color>';
inherits: false;
initial-value: #2575fc;
}
.gradient-btn {
background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
transition: --grad-start 0.3s, --grad-end 0.3s;
}
.gradient-btn:hover {
--grad-start: #ff416c;
--grad-end: #ff4b2b;
}</color></color>
- Firefox 和 Safari 完全不识别
@property，一用就整个 background 失效（回退到 transparent） - 必须显式声明
syntax和initial-value，漏一项就无法触发过渡 - 不能直接动画
background字符串值（如linear-gradient(...)），只能拆解为可量化的子属性
transition-delay 和 timing-function 影响感知明显，别忽略
渐变悬停不是越快越好。0.1s 太急，人眼来不及捕捉；0.5s 又拖沓，交互反馈迟钝。更关键的是缓动函数选择——ease 开头慢结尾快，适合“浮现”感；ease-in-out 两端都缓，适合对称变化；linear 容易显得机械。
- 移动端慎用
transition-delay：iOS Safari 在快速连续悬停时可能丢帧或卡住 - 如果元素有
transform: scale()同时触发，记得把transition拆开写，避免 background 动画被 transform 的硬件加速策略干扰 - 用
prefers-reduced-motion: reduce媒体查询兜底，对开启“减少运动”的用户直接关掉 transition
实际项目里，95% 的场景用双层 opacity 方案就够了。真要动渐变本身，得先确认运行环境、用户设备、是否值得为 5% 的视觉提升增加维护成本和降级逻辑——这点比怎么写代码更常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
