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

Question

我正在寻找一个可行的解决方案，以动画 html5 的background-position 属性progress 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