在正在进行的伪选择器元素上设置背景位置动画的解决方法

Question

我有一个不确定的进度条：

<progress max="100"></progress>

我用带有 45 度条纹的绿色背景设计了它：

progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
progress:not([value])::-webkit-progress-bar {
background-image:
-webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%),
-webkit-linear-gradient(#b3ee3a, #b3ee3a);
background-size: 2.5em 1.25em, 100% 100%, 100% 100%;
background-position: 10%;
animation-name: stripes;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes stripes {
from {background-position: 0%}
to {background-position: 100%}
}

(完整示例：https://jsfiddle.net/w9x7sm6c/4/)

不幸的是，动画不起作用。 该问题似乎源于Chrome错误/功能：

https://bugs.chromium.org/p/chromium/issues/detail?id=486195

将其关闭为WontFix。

原因：@keyframes规则名称的作用域内，因此指定的名称仅可用 在同一个树范围内(即在同一个文档或影子根中)。 进度：：-webkit-进度-值 刺穿文档-UA 阴影根边界 和设置元素的样式，但在文档树中定义了动画名称 范围 在 UA 影根中不可用，因此动画不适用。

。

一种解决方法可能是制作自己的小部件并对其进行动画处理，这应该 适用于所有(如果实现了 CSS 动画)浏览器。

在我看来，建议的解决方法是不使用<progress>，这对我来说似乎是个糟糕的建议。 我宁愿使用正确的语义元素，也不愿发明做同样事情的东西。

是否有任何解决方法可用于在不确定状态下对此进度条进行动画处理？

Answer 1

你可以考虑使用通用的伪元素来创建它。

body {
background: #333;
}
progress {
display: block;
margin-bottom: 1em;
position:relative;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
progress::-webkit-progress-bar {
background-color: #777;
border-radius: 0.3em;  
}
progress[value]::-webkit-progress-bar {
box-shadow: 0 0.3em 0.3em rgba(0,0,0, 0.3) inset;
}
progress::-webkit-progress-value {
border-radius: 0.3em;
background-color: #b3ee3a;
}
progress:not([value])::-webkit-progress-bar {
/* nothing here*/
}
progress:not([value])::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 0.3em; 
background:
linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%) left/2.5em 1.25em,
#b3ee3a;
background-position: 10%;
animation-name: stripes;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes stripes {
from {background-position: 0%}
to {background-position: 100%}
}

<progress max="100" value="33"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="90"></progress>
<progress max="100"></progress>

或者使用 JS 通过结合超时的 CSS 变量来更新值。

下面是显示值更改的基本示例：

function update() {
document.querySelector('progress:not([value])').style.setProperty("--c", "100%");
}

progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
progress:not([value])::-webkit-progress-bar {
background:
linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%),
#b3ee3a;
background-size: 2.5em 1.25em;
background-position: var(--c,10%);
transition:1s all;
}

<progress max="100"></progress>
<button onClick="update()">change</button>