用 transform: scaleX() 驱动进度条最可控，因不触发重排、仅影响合成层，配合 overflow: hidden 容器、transform-origin: left center 及 CSS 自定义属性 --progress，再通过 @keyframes + animation 实现高性能、可暂停、易扩展的动画效果。
用 transform: scaleX() 驱动进度条动画最可控
直接操作宽度（width）会触发重排，而 transform: scaleX() 仅影响合成层，性能好、动画顺滑，且能精准控制起始/结束比例。关键在于把进度条容器设为 overflow: hidden，内部元素用 transform: scaleX(0) → scaleX(1) 实现伸展效果。
- 容器必须设固定宽高和
overflow: hidden，否则缩放会溢出 - 动画元素需设
transform-origin: left center，确保从左向右展开 - 若需支持 IE10+，补上
-ms-transform前缀（现代项目通常可忽略） - 进度值建议用 CSS 自定义属性（
--progress: 0.65）传入，便于 JS 动态更新
用 @keyframes + animation 控制播放节奏
不要用 transition 做“从 0 到 100%”的单次进度条——它无法控制动画时长、缓动曲线或暂停。改用 @keyframes 定义关键帧，再通过 animation 绑定，才能灵活适配加载、上传、表单验证等不同场景。
-
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)可模拟“先快后慢再收尾”的真实加载感 - 加
animation-fill-mode: forwards确保动画结束后保持最终状态（scaleX(1)） - 需要手动暂停？用
animation-play-state: paused，比 JS 控制 class 更轻量
@keyframes progress-grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar::after {
content: '';
display: block;
height: 4px;
background: #4a90e2;
transform-origin: left center;
animation: progress-grow 1.8s ease-out forwards;
}
JS 动态更新进度时避免强制同步布局
如果用 JS 每次都改 style.width 或读取 offsetWidth，会频繁触发重排，尤其在循环中更新多个进度条时卡顿明显。正确做法是只写不读，用 CSS 变量 + transform 配合 requestAnimationFrame 批量更新。
- 用
element.style.setProperty('--progress', value)更新变量，CSS 内用transform: scaleX(var(--progress)) - 不要在 for 循环里直接设 style —— 先收集所有目标元素，再统一用
requestAnimationFrame批量更新 - 若需监听进度完成事件，监听
animationend比轮询更可靠
兼容性与 fallback 要点：IE 和 Safari 的坑
Safari 旧版本（≤15.4）对 transform: scaleX() 动画有渲染抖动；IE11 不支持 CSS 变量，也无法用 animation-fill-mode: forwards 保持最终状态。必须做降级处理。
立即学习“前端免费学习笔记（深入）”；
- IE11 下回退到
width+transition，加will-change: width提升合成层 - Safari 中避免在
scaleX()动画期间同时修改其他 layout 属性（如padding） - 用
@supports (animation: name 1s)包裹高级动画规则，老浏览器自动跳过
@supports (animation: test 1s) {
.progress-bar::after {
transform: scaleX(var(--progress, 0));
}
}
@supports not (animation: test 1s) {
.progress-bar::after {
width: calc(var(--progress, 0) * 100%);
}
}
实际用起来，最难的不是写动画，而是让进度值和业务逻辑真正对齐——比如上传中断后如何恢复动画位置、错误状态要不要回退、多步骤流程中各阶段进度如何叠加。这些得靠 JS 状态管理兜底，CSS 动画只负责“怎么动”，不动“为什么动”。
