改linear-gradient()字符串会触发重绘，因其为非可动画属性，浏览器无法插值，只能重建图形上下文并整块重绘；真正可动画的是background-size、transform等合成层属性。
直接结论：用 CSS 自定义属性（变量）控制渐变层的 color-stop 位置或透明度，配合 background-size 或 transform 动画替代重绘整个 linear-gradient() 字符串，能显著减少重排重绘开销。
为什么改 linear-gradient() 字符串会触发重绘？
每次修改 background-image: linear-gradient(...) 的值（比如拼接新的百分比），浏览器必须重新解析整个渐变函数、重建图形上下文、再重绘整块背景——哪怕只变了一个数字。尤其在多层渐变叠加时，这种字符串替换成本更高。
常见错误现象：transition: background-image 0.3s 几乎无效；进度条卡顿；动画掉帧；DevTools 中 Layout/Render 频繁触发。
关键原因在于：background-image 是非可动画属性（non-animatable），浏览器无法插值，只能硬切帧。
立即学习“前端免费学习笔记（深入）”；
- 避免写
background: linear-gradient(to right, #f00 0%, #f00 var(--p), #ccc var(--p), #ccc 100%)并靠修改--p触发 transition —— 这本质仍是重写整个渐变字符串 - 真正可动画的属性只有：
background-size、background-position、opacity、transform等 - 多层渐变中，每一层都应尽量绑定到一个可动画属性上，而不是靠变量拼接渐变体
用 background-size + 单层渐变替代多 stop 控制
这是最轻量、兼容性最好（支持 IE10+）的优化方式。核心是把“进度”映射为背景图的尺寸，而非颜色断点位置。
典型场景：双色进度条、加载遮罩、状态指示器
- 结构：一层纯色底（
#f0f0f0） + 一层渐变覆盖（linear-gradient(to right, #4cd964, #4cd964)） - 控制逻辑：
background-size: var(--progress) 100%，其中--progress: 35%直接决定渐变层宽度 - 动画写法：
transition: background-size 0.3s ease，完全可插值 - 多层叠加时，每层独立设
background-size，例如高光层用background-size: 20% 40%，不干扰主进度层
示例代码：
.progress-bar {
--progress: 0%;
height: 8px;
background:
linear-gradient(to right, #4cd964, #4cd964) left / var(--progress) 100% no-repeat,
#f0f0f0;
transition: background-size 0.3s ease;
}用 transform: translateX() 驱动渐变层位移
当需要模拟「滑入」「扫光」等动态效果，且不想受限于 background-size 的缩放语义时，transform 是更灵活的选择。
适用场景：按钮悬停扫光、卡片 hover 渐变过渡、滚动视差背景
- 原理：将渐变层作为伪元素或额外 div，用
transform: translateX()移动其位置，视觉上产生渐变流动感 - 优势：
transform不触发重排，GPU 加速，性能远优于修改background-position（后者可能触发重绘） - 注意：需配合
will-change: transform或backface-visibility: hidden提前提示渲染层 - 多重渐变时，每层可设不同
transform值和 duration，实现错落节奏
示例（伪元素扫光）：
.btn {
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 200%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transform: translateX(var(--glide, 0));
transition: transform 1.2s ease;
}
.btn:hover::before {
--glide: 100%;
}多层渐变中变量的隔离与复用边界
别让一个变量同时控制多个渐变层的颜色和位置——这会破坏各层的独立动画能力，也增加调试复杂度。
容易踩的坑：
- 错误写法：
--main-color: #4cd964; background: linear-gradient(..., var(--main-color), ...), radial-gradient(..., var(--main-color), ...)—— 改一个变量却强制两层同步重绘 - 正确做法：按职责拆分变量，如
--progress-width、--glow-opacity、--highlight-angle，每层只响应自己关心的变量 - 性能敏感场景（如滚动中动态渐变），优先用
transform和opacity，避免读取getComputedStyle获取变量值来驱动 JS 计算 - CSS 变量本身无性能损耗，但滥用
calc()嵌套（如calc(var(--a) + var(--b) * 2)）在旧版 Safari 中可能引发计算延迟
最后提醒：浏览器对 linear-gradient() 的解析开销虽小，但在高频更新（如 requestAnimationFrame 驱动）或大量元素共用同一渐变模板时，差异会立刻暴露。真正省性能的不是“少写几行 CSS”，而是让变化落在浏览器最擅长加速的属性上。
