I am seeking a functional method to animate the background-position property 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/
However, gecko supports the animation of the background-position property, simple example:
progress[value] {
...
}