进度条动画应使用 transform: scaleX() 替代 width 以避免重排，@keyframes 必须显式定义 0% 和 100% 关键帧并配合 animation-fill-mode: forwards，绑定时禁用 infinite，推荐配置为 animation: progress-fill 2s ease-out forwards。
用 @keyframes 定义进度条的宽度变化动画
进度条加载动画本质是元素 width 从 0% 到 100% 的连续过渡，@keyframes 负责声明这个变化过程。关键不是“动起来”，而是“动得自然”——需明确起始/结束状态，并避免默认行为干扰。
常见错误是只写 from { width: 0% } 和 to { width: 100% }，但没配 transform: scaleX(0) 类方案，导致父容器重排（reflow），性能差；或漏掉 forwards 填充模式，动画一结束就跳回 0%。
-
@keyframes progress-fill必须显式写0%和100%关键帧，兼容性比from/to更稳 - 动画属性建议用
transform: scaleX()替代width，避免触发 layout - 必须加
animation-fill-mode: forwards，否则动画停在最后一帧前的瞬间，视觉上“回弹”
@keyframes progress-fill {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
给进度条容器绑定 animation 并控制时长与循环
动画本身定义完，不等于它会自动播放——必须通过 animation 简写属性或单个属性绑定到实际元素上。这里最容易被忽略的是：进度条通常**不循环**，但开发者常误设 infinite；还有人把 animation-duration 设成 0.5s 导致太快看不出加载感。
-
animation: progress-fill 2s ease-out forwards是典型配置，2 秒提供可感知的加载节奏 - 绝对不要加
infinite，除非是模拟“待机中”的呼吸效果，而非真实进度反馈 - 若需动态控制（如 API 返回后停止），用 JS 切换 class 比直接操作
animation-play-state更可靠
配合 HTML 结构实现可复用的进度条组件
纯 CSS 动画无法响应数据变化，所以结构上要分离“容器”和“填充层”。常见坑是把 animation 加在父容器上，结果整个条跟着动；或者用伪元素做填充却忘了 position: absolute 脱离文档流。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<div class="progress"><div class="progress__fill"></div></div> -
.progress__fill设height: 100%、background和animation，父容器负责宽高与边框 - 若需支持 IE10+，补
@-webkit-keyframes和-webkit-animation，但不用写全前缀
.progress__fill {
height: 100%;
background: #4a90e2;
transform-origin: left center;
animation: progress-fill 2s ease-out forwards;
}
如何用 JS 触发不同阶段的进度动画（如 30% → 70%）
@keyframes 本身不支持运行时修改关键帧数值，所以“分段进度”不能靠改动画定义，而要靠切换 class 或内联 transform。最简方案是用 JS 直接设置 style.transform，再用 transition 衔接。
- 删掉原
animation，改用transition: transform 0.3s ease在 .progress__fill 上 - JS 中执行
el.style.transform = 'scaleX(0.7)'即可平滑过渡到 70% - 如果仍想保留
@keyframes做初始加载，可在 JS 中先加 class 启动动画，再用setTimeout清除 class 并手动设最终值
真正难的不是让条动起来，而是让动的过程符合用户对“进度”的心理预期：太慢像卡死，太快像没加载，中间断点又容易失真。这些细节没法靠一个 @keyframes 解决，得靠结构、JS 控制和动效节奏一起调。
