CSS3 webkit-progress-bar 动画背景位置

Question

我正在寻找一个可行的解决方案，以 animate background-position 属性 of an html5 progress element in webkit/blink.

HTML:

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

CSS:

progress[value]::-webkit-progress-bar {
  -webkit-animation: moveBackground 2s steps(30) infinite;
  background-image: repeating-linear-gradient(to right, green 0%, orange 50%, blue 100%);
  background-size: 30rem;
}

@-webkit-keyframes moveBackground
{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -50rem 0;
  }
}

Fiddle: https://jsfiddle.net/6gekeegg/

不过，gecko支持background-position属性的动画，简单例子：

progress[value] {
  ...
}

Answer 1

动画属性应该加前缀

-webkit-animation: moveBackground 2s steps(30) infinite;

fiddle

Answer 2

更新：2015 年 3 月 11 日：

chrome <=41 似乎不支持进度元素的 background-position 属性的动画。

我已经使用 ::after css pseudo-element 创建了一个可行的解决方案：

https://jsfiddle.net/x7urfdev/

请注意： firefox 不支持进度元素上的 ::after 或 ::before pseudo-element。