CSS3 Transition of HTML5 progress bar element

Question

I am using a progress bar as described here:

http://css-tricks.com/html5-progress-element/

Using the <progress> element and styling it with the pseudo classes -webkit-progress-bar and -webkit-progress-value.

So now I want to animate the progress-value, whenever it updates.

In my theory this should work via transitioning its CSS width attribute like this:

progress::-webkit-progress-value {
    transition: 5s width;
}

But for some reason this does not seem to work.

Answer 1

The correct syntax for the transition property is:

transition: [property] [duration] [timing-function] [delay];

then your value ( transition: 5s width; ) is wrong, timing and property are inverted, and timing function is missing. It should be (for example):

transition : width 5s ease;

It should also be prefixed to work crossbrowser, especially for WebKit based browsers, leaving the standard property as the last one.

-webkit-transition : width 5s ease;
   -moz-transition : width 5s ease;
     -o-transition : width 5s ease;
        transition : width 5s ease;