伪元素opacity动画无法触发渐变重绘，因background-image不支持插值；可行方案为background-position位移、@keyframes帧动画或@property自定义属性插值。
伪元素做渐变过渡时 opacity 动画不触发重绘
直接用 ::before 或 ::after 叠加一层渐变色，再靠 opacity 动画切换——看起来能动，实际多数浏览器不会重绘背景层，导致过渡卡顿或完全静止。
- 根本原因是
opacity属于合成属性（composited），浏览器会把它丢进独立图层，但图层内的background-image（比如linear-gradient）本身不支持插值，动画只是硬切两张图 - 只适用于纯色叠加场景；一旦涉及渐变色内部色标（
color-stop）变化，opacity就无能为力 - 移动端 Safari 尤其明显：动画一卡，甚至直接跳变
CSS background-image 无法直接 transition 的替代方案
想让渐变色“动起来”，不能指望 transition: background-image —— 它在所有主流浏览器里都被忽略，连警告都不报。
- 可行路径只有两条：用
background-position移动渐变（适合方向/偏移类动效）或用@keyframes+background-image帧动画（适合色标变化） - 如果必须响应状态切换（如 hover / class 切换），优先选
@keyframes，配合animation-fill-mode: forwards - 注意
linear-gradient(45deg, #f00, #00f)和linear-gradient(45deg, #00f, #f00)是两个不同值，无法被浏览器插值，得手动写中间帧
用 mask-image + opacity 模拟渐变过渡的边界条件
有人尝试用 mask-image: linear-gradient 配合 opacity 控制显隐，看似绕开了背景渐变限制——但实际只在特定条件下成立。
- 仅当遮罩渐变方向、色标数量、起始/结束位置完全一致时，
opacity才能产生“平滑覆盖”错觉 - Chrome 115+ 支持
mask-border，但 Safari 目前仍需-webkit-mask前缀，且不支持mask-image的 transition - 若容器有
transform或filter，mask 渲染可能失准，尤其在缩放或高 DPR 屏幕下
真正可控的渐变过渡：CSS 自定义属性 + @property
Chrome 110+、Safari 16.4+、Firefox 112+ 已支持 @property 声明渐变中的颜色变量，这才是目前唯一能对渐变色标做插值的方式。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
@property --grad-color { syntax: "<color>"; inherits: false; initial-value: #000; }</color> - 然后在
background-image中用linear-gradient(var(--grad-color), var(--grad-color-end))，再对变量做transition - IE 和旧版 Edge 完全不支持，降级方案只能回退到 JS 插帧或静态色块切换
渐变色过渡不是“能不能实现”的问题，而是“在哪种环境里能稳定交出预期效果”的问题。别被 demo 里的丝滑骗了——打开 DevTools 切换设备模拟器，多试几个浏览器版本，比看文档管用。
