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

Question

我正在寻找一个有效的解决方案，以动画 html5 / {{3中progress webkit元素的background-position属性}}

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;
  }
}

小提琴：blink

但是，https://jsfiddle.net/6gekeegg/支持background-position属性的动画，简单示例：

progress[value] {
  ...
}

Answer 1

动画属性应该加上前缀

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

fiddle

Answer 2

更新：11。2015年3月：

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

我创建了一个使用::after css伪元素的工作解决方案：

  

https://jsfiddle.net/x7urfdev/

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