CSS进度条动画核心是通过@keyframes控制width变化并用animation触发：先设容器与进度条结构，定义0%到100%宽度过渡，再应用animation-name、duration、timing-function和forwards确保终态保持。
用 CSS 实现进度条动画，核心思路是：通过控制元素的 width 变化，配合 @keyframes 定义动画过程，再用 animation 触发。这种方式轻量、无需 JS，适合静态加载效果或简单状态反馈。
基础结构：容器 + 进度条层
先搭建 HTML 结构，通常用外层容器（控制宽高和边框）包裹一个内层条（实际动的部分）：
关键帧定义：从 0% 到 100% 的宽度过渡
在 CSS 中用 @keyframes 声明动画，只改变 width 属性即可。注意要设好初始宽度（如 0），并确保父容器有明确宽度（如 100% 或固定值）：
@keyframes progressFill {0% { width: 0%; }
100% { width: 75%; }
}
这里 75% 表示最终填充到容器宽度的 75%，可按需替换为变量或具体数值。
立即学习“前端免费学习笔记（深入）”；
应用动画：绑定、时长、缓动与循环
把动画加到 .progress-bar 上，并设置关键属性：
-
animation-name：填入上面定义的动画名（如
progressFill） -
animation-duration：比如
2s，控制整个填充耗时 -
animation-timing-function：推荐
ease-out或cubic-bezier(.2, .8, .4, 1)，让启动更自然 - animation-fill-mode: forwards：确保动画结束后保持在 100% 状态（否则会回退到 0%）
background: #4a90e2;
height: 8px;
width: 0%;
animation: progressFill 2s ease-out forwards;
}
进阶技巧：动态控制与重播
如果需要 JS 控制进度或重新播放动画，可借助 animation-play-state 或切换 class 触发重流：
- 给 .progress-bar 添加
animation-play-state: paused，JS 中改为running启动 - 想重播动画，可通过 JS 移除再添加 class，或利用
animation: none重置后恢复 - 若需不同进度，直接修改
width内联样式，配合transition: width .3s ease实现平滑变化（不依赖 keyframes）
不复杂但容易忽略
