progress标签不支持css动画直接驱动value属性，需用js控制value变化或css模拟流动效果；推荐background-image+linear-gradient平移实现无js视觉流动，js动画应使用requestanimationframe线性插值避免卡顿。
progress 标签本身不支持 CSS animation 直接驱动进度
直接对 <progress></progress> 元素的 value 属性做 CSS 动画（比如 @keyframes 改变 value）是无效的——value 是 HTML 属性，不是 CSS 可动画的属性。浏览器不会响应这类“伪动画”。真实流动感必须靠 JS 控制 value 变化节奏，或用 CSS 模拟视觉流动效果。
用 background-image + linear-gradient 实现“流动”视觉假象
这是最轻量、兼容性好、无 JS 的方案。核心是用带透明度的渐变条在固定背景上平移，制造“光标扫过”的错觉。
关键点：
- 把
<progress></progress>的默认样式清空：appearance: none，再自定义::-webkit-progress-bar和::-webkit-progress-value - 给
::-webkit-progress-value设置background-image: linear-gradient(...)，并用background-size控制条纹密度 - 用
animation: flow 2s linear infinite平移background-position
.progress-flow::-webkit-progress-value {
background-image: linear-gradient(
90deg,
transparent,
rgba(100, 150, 255, 0.4),
transparent 50%
);
background-size: 200% 100%;
animation: flow 2s linear infinite;
}
<p>@keyframes flow {
0% { background-position: 0 0; }
100% { background-position: -200% 0; }
}</p>
JS 驱动 value 变化时如何避免卡顿或跳变
单纯用 setTimeout 或 setInterval 递增 value 容易因帧率不稳导致抖动。应优先使用 requestAnimationFrame，并按目标值线性插值计算当前进度。
示例逻辑：
- 记录起始时间、起始值、目标值、持续毫秒数
- 在
raf回调中计算已过去比例：(Date.now() - start) / duration - 用
Math.min截断，避免超调；用Math.round避免小数导致渲染模糊 - 直接赋值
progressEl.value = current，不要用style.width等间接方式
function animateProgress(progressEl, targetValue, duration = 800) {
const startValue = progressEl.value;
const start = Date.now();
function step() {
const elapsed = Date.now() - start;
const ratio = Math.min(elapsed / duration, 1);
const current = Math.round(startValue + (targetValue - startValue) * ratio);
progressEl.value = current;
if (ratio <h3>IE 不支持 progress 标签，但 animation 流动效果仍可 fallback</h3><p>IE 下 <code><progress></progress></code> 会退化为普通 inline 元素，但你可以用 <code><div class="progress-wrapper"><div class="progress-fill"></div></div></code> 手动实现，并复用上面的 <code>background-image + animation</code> 方案。注意 IE10+ 支持 <code>@keyframes</code>，但需加 <code>-ms-</code> 前缀；IE9 及以下则只能放弃动画，仅做静态填充。</p><p>真正容易被忽略的是：流动动画的节奏要和业务语义匹配。上传文件时用慢速平滑流动，加载配置时用稍快节奏，而错误状态下的“回滚”动画不能只靠 reverse —— 很多时候需要重置 <code>background-position</code> 并重新触发动画，否则会卡在中间位置。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
