CSS3 webkit-progress-bar animate background-position

Question

I am looking for a working solution, 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] {
  ...
}

score 0 · Answer 1 · answered Mar 10 '15 at 20:45

0

animation property should be prefixed

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

fiddle

answered Mar 10 '15 at 20:45

vals

61,425
11
89
138

I've tested your fiddle in Windows 7+8 - no, but it does not work (animation). – mate64 Mar 10 '15 at 22:31

mate64 · Accepted Answer · 2015-03-11T22:51:41.070

0

Update: 11. Mar. 2015:

chrome <=41 seems not to support animations for the background-position attribute of progress elements.

I have created a working solution with the ::after css pseudo-element:

https://jsfiddle.net/x7urfdev/

Please note: firefox does not support the ::after or ::before pseudo-elements on progress elements.

edited Mar 11 '15 at 22:51

answered Mar 11 '15 at 13:12

mate64

9,876
17
64
96

1

It's a regression. It works ok in Chrome 40, but not in 41 or 42 (Canary) – vals Mar 13 '15 at 21:36

CSS3 webkit-progress-bar animate background-position

2 Answers2