如何通过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 绑定，才能灵活适配加载、上传、表单验证等不同场景。