如何通过CSS动画实现进度条动态展示效果？

本文共计898个文字，预计阅读时间需要4分钟。

直接操作宽度（width）会导致重排，而transform: scaleX(0)仅影响合成层，性能好、动画流畅，并能精确控制开始/结束。关键在于将进度条容器设置为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); } } <p>.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)); } } <p>@supports not (animation: test 1s) { .progress-bar::after { width: calc(var(--progress, 0) * 100%); } }

实际用起来，最难的不是写动画，而是让进度值和业务逻辑真正对齐——比如上传中断后如何恢复动画位置、错误状态要不要回退、多步骤流程中各阶段进度如何叠加。这些得靠 JS 状态管理兜底，CSS 动画只负责“怎么动”，不动“为什么动”。