progress的value属性无法触发CSS过渡，因value非可动画CSS属性；应改用div模拟进度条，通过width或transform: scaleX()实现平滑动画，并兼顾可访问性与兼容性。
progress标签的value属性不触发CSS过渡
直接给 <progress> 元素写 transition: value 0.3s ease 是无效的——value 不是 CSS 可动画属性，浏览器根本不识别它。你看到的“跳变”不是渲染慢，而是根本没走过渡逻辑。
常见错误写法：
progress { transition: value 0.3s ease; } 这行 CSS 完全被忽略，DevTools 的 computed 面板里也找不到对应过渡项。
用JavaScript驱动伪进度条实现平滑更新
真实可用的方案是绕过原生 value，改用 <div> 模拟进度条视觉，再通过 JS 控制其 width 或 transform: scaleX() —— 这两个属性支持 CSS 过渡且性能好。
- 把原生
<progress>设为visibility: hidden或position: absolute; opacity: 0，仅保留语义和可访问性（如aria-valuenow） - 在它外面包一层容器，内部放一个
<div class="progress-fill">，初始width: 0% - JS 更新时，先修改原生
progress.value，再同步设置progress-fill.style.width = newPercent + '%' - CSS 中对
.progress-fill添加transition: width 0.3s ease（或更优的transform: scaleX()）
为什么推荐 transform: scaleX() 而不是 width？
width 触发 layout + paint，高频更新时可能掉帧；transform: scaleX() 只触发 composite，GPU 加速更稳。
立即学习“前端免费学习笔记（深入）”；
实操要点：
.progress-fill {
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}JS 中设为：
el.style.transform = 'scaleX(' + (newPercent / 100) + ')';
注意：必须显式设 transform-origin，否则缩放中心默认是元素中心，会导致向两边扩展而非从左向右增长。
兼容性与可访问性不能丢
隐藏原生 <progress> 后，仍需保证屏幕阅读器能读取当前值：
- 保持
<progress value="65" max="100">在 DOM 中，不要移除 - 确保 JS 更新时同步操作原生元素的
value和aria-valuenow - 如果用
transform方案，记得给.progress-fill加aria-hidden="true"，避免重复播报 - IE11 不支持
<progress>的value属性动态更新，需 fallback 到setAttribute('value', n)
最易被忽略的是：动画过程中用户若手动聚焦到进度条，焦点样式会套在不可见的原生元素上，建议加 progress:focus { outline: 2px solid #007aff; } 并确保它可见（比如用 opacity: 0.01 替代 display: none）。
