最简高性能css进度条方案是用transform: scalex()替代width动画并设transform-origin: left center，配合overflow: hidden和background-color过渡。
怎么用 background-color + width 实现进度条动画
纯 CSS 进度条最简方案就是控制 width 和 background-color，但直接写 transition: width 0.3s 在多数浏览器里会触发重排（layout），性能差，且颜色过渡不自然。关键不是“能不能动”，而是“动得稳不稳、顺不顺”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scaleX()替代width动画，避免重排；外层容器设overflow: hidden隐藏溢出部分 -
background-color动画必须加transition: background-color 0.3s ease，否则颜色突变（尤其从绿色跳到红色时） - 不要对
width做百分比过渡的同时又改background-color—— 两者不同步容易闪一下
`.progress-bar {
height: 8px;
background: #e0e0e0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #4caf50;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease;
}`
为什么 progress-fill 的 transform-origin 要设成 left center
默认 transform-origin 是 50% 50%，缩放时会以中心为基点向两边收缩 —— 进度条就变成“中间先动”，不符合从左到右的视觉预期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
transform-origin: left center，确保缩放始终从左侧开始 - 如果父容器有 padding 或 border，
left指的是内容区左边缘，不是容器左边界 —— 所以别把.progress-bar写成display: inline-block加 margin，容易偏移 - 用
scaleX()时，值范围是0到1（不是 0%–100%），JS 更新时直接赋el.style.transform = `scaleX(${percent / 100})`
JS 更新进度时常见的 DOM 同步问题
直接在 JS 里连续改 style.transform 和 style.backgroundColor，浏览器可能合并渲染，导致颜色没变、宽度先动，或者反过来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 颜色和缩放更新要放在同一个重绘周期内 —— 推荐用
requestAnimationFrame包一层 - 别在循环里反复设
style，比如 for (let i = 0; i - 如果进度来自异步请求（如上传进度），注意
XMLHttpRequest.upload.onprogress触发频繁，要做节流，比如只在percent变化 ≥ 1% 时才更新 DOM
IE11 兼容时 background-color 动画失效怎么办
IE11 不支持 transition 对 background-color 的平滑插值（尤其跨色空间，如 #4caf50 → #f44336），会直接跳变，甚至不触发过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 降级方案：改用
opacity叠加两层色块（绿色层 + 红色层），通过透明度切换视觉重心，兼容性更好 - 避免在 IE11 中用 HSL 或 RGBa 值做
background-color过渡 —— 它只认十六进制，且不解析函数式写法 - 如果必须支持 IE11，CSS 里补一句
transition: background-color 0.3s, opacity 0.3s，哪怕 opacity 不用，也能激活部分过渡逻辑
真正难的不是写出来，是让进度条在低配设备上不卡、不闪、不跳，尤其是用户盯着看的时候。
