CSS3 Animation on HTML5 Progress Bars doesn't work in Firefox [on hold]

CSS3 Animation on HTML5 Progress Bars doesn't work in Firefox [on hold]

HTML
<progress max="100" value="80"></progress>
CSS
progress[value]
{
/* Reset the default appearence */
-moz-appearance: none;
appearance: none;
/* Get rid of default border in Firefox and Opera. */
border: none;
/* Dimensions */
width: 250px;
height: 20px;
}
progress[value]::-moz-progress-bar
{
background-image: -moz-linear-gradient( 135deg,
transparent 33%,
rgba(0, 0, 0, .1) 33%,
rgba(0, 0, 0, .1) 66%,
transparent 66% ),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25) ),
-moz-linear-gradient( left, #09c, #f44 );
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
-moz-animation: animate-stripes 5s linear infinite;
animation: animate-stripes 5s linear infinite;
}
@-moz-keyframes animate-stripes { 100% { background-position: 100px 0px; } }
@keyframes animate-stripes { 100% { background-position: 100px 0px; } }
DEMO (Open this link in Firefox only)
http://jsfiddle.net/pankajparashar/CQGQ9/
PROBLEM
I am trying to animate the background stripes using css3 keyframes in
firefox by changing the background position. However, this isn't working
in firefox. The code above is a reduced test case written only for
firefox.