如何使用 CSS 制作 HTML5 进度条动画？

Question

当我们单击以下 HTML

<progress>

元素时，其值更改为 200。

但是没有动画作品：

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

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

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

如何使用 CSS 过渡为 HTML

<progress>

栏制作动画？

链接但不重复：HTML5进度条动画，HTML5进度条元素的CSS3过渡

此外，动画进度元素值（使用 jQuery 和自定义 JS）的主要答案在这里不起作用，仅使用 CSS 过渡/动画。

Answer 1

问题是没有定义

background-color

（！）。

没有（动画不起作用）：

progress {
}

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

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

With（动画工作）：

progress {
    background-color: transparent;
}

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

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