使用transition实现动态控制宽度的平滑动画，适合实时更新进度；通过keyframes定义固定动画流程，页面加载即自动播放，适用于展示性场景。
使用 transition 实现平滑进度条动画
H3 使用 transition 控制宽度变化实现渐进动画
font 通过 CSS 的 transition 属性，可以让元素的宽度从 0 平滑过渡到目标值。只需设置 .progress-fill 的 width 可被过渡，初始 width 为 0，当 JavaScript 修改其 width 时，浏览器自动补全中间帧，形成流畅动画。这种方式适合动态控制进度，比如根据实际加载情况实时更新。
- 给进度条填充层添加 transition: width 1s ease
- 初始状态 width 设为 0
- 通过脚本或用户交互修改 width 至目标百分比
- 浏览器自动计算中间过程，视觉上形成渐进效果
H3 使用 @keyframes 定义完整动画流程
font 利用 @keyframes 可以预设一段完整的动画路径，例如从 0% 宽度到 75%。配合 animation 属性应用到元素上，设定持续时间、缓动函数和结束状态（forwards 保持最终帧）。这种方案适用于启动即播放的固定动画，无需后续控制。
- 定义 keyframes 规则描述 width 变化过程
- 将 animation 应用于填充元素，如 animation: fill-progress 2s ease-in-out forwards
- 动画在元素出现时自动运行，不可逆向暂停，适合展示性场景
基本上就这些。两种方式都能实现自然流畅的进度条动画，选哪种取决于是否需要动态响应数据。
