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% 或固定值）：

这里 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%）

进阶技巧：动态控制与重播

如果需要 JS 控制进度或重新播放动画，可借助 animation-play-state 或切换 class 触发重流：

• 给 .progress-bar 添加 animation-play-state: paused，JS 中改为 running 启动
• 想重播动画，可通过 JS 移除再添加 class，或利用 animation: none 重置后恢复
• 若需不同进度，直接修改 width 内联样式，配合 transition: width .3s ease 实现平滑变化（不依赖 keyframes）

不复杂但容易忽略