background-position位移是唯一可靠且兼容的渐变过渡方案，通过设置background-size≥200%及统一单位的background-position值实现平滑动画，伪元素+opacity适用于方向/配色差异大的渐变切换。
background-position 位移是唯一可靠且兼容的渐变“过渡”方案
浏览器根本不支持对 linear-gradient() 值做 transition，写 transition: background 0.3s 或 transition: background-image 0.3s 都会静默失效。真正能动起来的只有 background-position——它可过渡、可动画、全平台支持（iOS Safari 13.4+ 起稳定）。关键不是“改渐变”，而是“拖动一张大图”。
实操要点：
-
background-size必须 ≥200% 200%（推荐400% 400%更平滑），否则位移范围太小，动画像抽搐 -
background-position初始值和目标值单位要一致：都用%（如0% 50%→100% 50%），别混用px和% - 方向必须匹配：水平流动就只动第一个值（
0% → 100%），垂直流动只动第二个（0% → 100%），双轴同时动需同步覆盖周期 - 避免用
background简写覆盖：后续写background: linear-gradient(...)会重置background-position和background-size，导致 transition 失效
CSS 变量 + @keyframes 只在现代浏览器可用，Safari 15.4 是分水岭
把颜色抽成 --start 和 --end，再用 @keyframes 改变量值，确实能实现颜色级平滑过渡，但这是个“纸面可行、线上受限”的方案。
问题很实在：
立即学习“前端免费学习笔记（深入）”；
- Safari ≤15.3 完全不支持对 CSS 变量的
@keyframes动画（包括 iOS 15.3 及更早） - Chrome/Firefox 支持良好，但必须用
background: linear-gradient(var(--start), var(--end))显式写法，不能靠简写 - 变量名不能带单位或函数，比如
--color: #ff6b6b可以，--grad: linear-gradient(...)不行——变量只能存原子值 - 动画卡顿常见于未加
will-change: background或未触发合成层，尤其在低端 Android 上
伪元素 + opacity 是最稳妥的渐变切换方案
当你要在两个完全不同方向/配色的渐变之间切换（比如 to right 蓝绿 → to bottom 紫红），background-position 就无能为力了——它要求渐变结构一致，否则会拉伸错位。这时该上伪元素。
核心逻辑是分层控制：
- 主元素设
position: relative，伪元素::before和::after绝对定位盖满 - 两层分别写不同
background-image: linear-gradient(...)，初始只显示一层（opacity: 1），另一层opacity: 0 - hover 或 JS 切 class 时，用
transition: opacity 0.4s ease交叉淡入淡出 - 务必加
transition: opacity 0.4s ease到伪元素本身，而不是父元素——否则无效
容易被忽略的性能与边界细节
写完能动只是第一步，真正在生产环境跑得稳，还得盯住这几个点：
-
background-clip: padding-box是默认值，但若容器有border-radius且值过大（>50%），边缘可能裁切渐变导致断层；圆角建议 ≤24px - 移动端监听
touchmove时，记得e.preventDefault()，否则滚动时坐标不更新 - 容器若有
transform: scale(0.85)，getBoundingClientRect()返回的是渲染后尺寸，但clientX/Y没缩放，必须手动除系数或改用offsetX/offsetY - 高频 mousemove 更新 CSS 变量易丢帧，必须包一层
requestAnimationFrame，且加防抖（if (rafId) cancelAnimationFrame(rafId)）
