通过background-position、多层背景透明度或CSS变量间接实现渐变动画，利用位移、opacity过渡或变量动态变化模拟平滑动效。
要用 CSS
transition实现渐变背景动画，关键在于不能直接对
background-image使用过渡，因为渐变属于复杂值，不支持平滑过渡。但可以通过一些技巧间接实现流畅的渐变动效。
使用 background-position 模拟移动渐变
通过改变渐变背景的位置，并配合
transition控制位移，可以制造颜色流动的视觉效果。 例如：创建一个线性渐变背景并让它水平滚动
HTML:
CSS:
.gradient-box {
width: 200px;
height: 100px;
background: linear-gradient(90deg, #ff7e5f, #feb47b, #ff7e5f);
background-size: 300% 100%;
background-position: 0% 50%;
transition: background-position 0.5s ease;
border-radius: 8px;
}
.gradient-box:hover {
background-position: 100% 50%;
}
这里将
background-size设为
300%，使渐变拉宽，再通过改变
background-position从 0% 到 100%，实现颜色“流动”的动画效果。
用多个背景层叠加实现淡入淡出
设置两个渐变背景层，分别控制它们的透明度变化，达到渐变切换的错觉。
立即学习“前端免费学习笔记（深入）”；
这种方法依赖
opacity或伪元素的淡出过渡。
.fade-gradient {
position: relative;
width: 200px;
height: 100px;
background: linear-gradient(45deg, #a8edea, #fed6e3);
transition: background 0.5s ease;
}
.fade-gradient::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, #ffafbd, #ffc3a0);
opacity: 0;
transition: opacity 0.6s ease;
border-radius: 8px;
pointer-events: none;
}
.fade-gradient:hover::before {
opacity: 1;
}
鼠标悬停时，上层渐变逐渐显现，形成渐变切换动画。
结合 CSS 自定义属性（CSS 变量）动态控制
利用 CSS 变量定义渐变中的颜色或角度，再通过 JS 或 hover 改变变量值，配合过渡模拟动画。
.dynamic-gradient {
--grad-angle: 0deg;
--color-a: #ff7e5f;
--color-b: #feb47b;
background: linear-gradient(var(--grad-angle), var(--color-a), var(--color-b));
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
width: 200px;
height: 100px;
border-radius: 8px;
}
.dynamic-gradient:hover {
--grad-angle: 180deg;
--color-a: #6a11cb;
--color-b: #2575fc;
}
虽然背景本身不会真正“过渡”颜色，但变化过程在视觉上足够平滑，尤其搭配缓动函数时。
基本上就这些常用方法。选择哪种取决于你想要的效果——是流动感、淡入淡出，还是角度/颜色切换。核心思路是绕过无法直接过渡渐变的限制，用位置、透明度或变量来实现近似动画。
