如何使用CSS Transition实现HTML <progress>进度条的动画效果？

点击以下HTML <progress>元素时，其value值会变为200，但当前的CSS设置无法产生动画效果：

原代码 #

CSS

progress {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    animation: progress 1s ease;
}

progress::-webkit-progress-value {
    transition: all 1s ease;
}

HTML

<progress value="0" onclick="this.value=200" max="1000"></progress>

解决方案 #

原生<progress>元素的样式由浏览器内部实现，直接给<progress>标签加过渡不会生效，需要针对不同浏览器的专属伪元素设置过渡属性：

/* WebKit内核浏览器（Chrome、Safari等） */
progress::-webkit-progress-value {
  transition: width 1s ease;
}

/* Firefox浏览器 */
progress::-moz-progress-bar {
  transition: width 1s ease;
}

说明 #

• 无需给<progress>本身添加transition，也不需要多余的animation规则
• 明确指定过渡属性为width（而非all），可以避免不必要的性能开销
• 当<progress>的value属性变化时，浏览器会自动调整对应伪元素的宽度，触发过渡动画实现平滑效果

要求仅通过CSS过渡/动画实现，使用jQuery或自定义JS的方案在此场景下无效。

内容的提问来源于stack exchange，提问作者Basj