纯 CSS 实现进度条动画应避免 width 动画，优先使用 transform: scaleX() 或 background-position + linear-gradient；前者性能稳、兼容好，后者适合丝滑伪进度条，SVG 环形需精确计算周长并控制 stroke-dasharray 与 offset。
直接说结论：纯 CSS 实现进度条动画，能不用 width 动画就别用——它触发 layout，卡、不准、难对接真实加载；优先选 transform: scaleX() 或 background-position + linear-gradient，性能稳、可控强、兼容好。
为什么 width 动画在进度条里容易翻车
width 变化看着简单，但实际项目里常踩坑：
• 父容器是 flex 或 grid 时，width 被 flex-basis 或 grid-column 截断，过渡突然中断
• 在 transform 父级下（比如用了 scale 或 translateZ），width 值会失真，进度跳变
• overflow: hidden 没加在正确层级，子元素溢出后被裁切错位
• 初始值没设 width: 0%，动画从默认 auto 宽度开始，第一帧闪一下
• JS 更新时用 classList.add('progress-50') 切 class，而不是直接写 el.style.width = '50%'，导致 transition 失效
用 transform: scaleX() 替代 width 的实操要点
这是目前最平衡的方案：不触发布局、GPU 加速、JS 控制精准、兼容到 IE10+。
• 进度条子元素必须设 transform-origin: left center，否则缩放中心偏移
• 初始状态写 transform: scaleX(0)，别依赖 width 隐式归零
• JS 更新时只改 el.style.transform = 'scaleX(' + ratio + ')'，ratio 是 0–1 小数
• 不要混用 scaleX 和 width，CSS 会取后者覆盖前者
• 圆角需加在父容器上，子元素（缩放层）本身别设 border-radius，否则缩放时圆角形变
用 background-position + linear-gradient 做高性能伪进度条
适合顶部细条、页面级 loading 指示器这类不需要精确百分比、但要求丝滑不卡的场景。
• 容器设 position: relative，伪元素 ::after 设 position: absolute; top: 0; left: 0; right: 0; bottom: 0
• 渐变背景写成 linear-gradient(to right, #4cd964, #4cd964) left/200% 100% no-repeat，再配 background-size: 0% 100% 初始态
• JS 改 el.style.backgroundSize = ratio * 100 + '% 100%'，ratio 同样是 0–1
• 关键：加 will-change: background-size（尤其移动端），否则 iOS Safari 帧率掉得明显
• 注意 Safari 对 background-size 动画的支持较晚，iOS 14.5+ 才稳定，老版本建议降级为 transform 方案
立即学习“前端免费学习笔记（深入）”；
用 stroke-dasharray 做环形进度条时的硬伤点
SVG 环形进度条不是“旋转”，而是描边截取，细节一错进度就飘：
• 圆半径 r=45 时周长 ≈ 282.74，必须手动四舍五入写死 stroke-dasharray="283,283"，不能靠 JS 动态算再塞进 CSS
• stroke-dashoffset 必须从大往小变（如 283 → 0），且初始值要和 stroke-dasharray 第一项一致
• 起始方向默认是 3 点钟，必须加 transform: rotate(-90deg) 对齐顶部
• 别给 <circle></circle> 写 transition: stroke-dashoffset 0.3s，初始加载会从 0 突跳；改用 transition: stroke-dashoffset 0.3s 0.1s 延迟起步更稳
• 如果用 React/Vue 渲染 SVG，确保 stroke-dasharray 和 stroke-dashoffset 都走内联 style，CSS 类里设无效
真实项目里最难的从来不是“怎么动起来”，而是“动得准、停得住、接得上”。JS 控制值、CSS 负责过渡，这条分工线划清楚了，大部分卡顿和错位问题就自然消失。
