How to animate the progress element with CSS3?

Question

I have a progress element like so:

body {
  background: grey;
}

progress[value] {
    -webkit-appearance: none;
    appearance: none;
    height: 25px;
    width: 95%;
    position: relative;
    top: 10px;
    right: 50%;
    left: 2.5%;
}

progress[value]::-webkit-progress-bar {
  background-color: rgba(255,255,255,0.2);
  border-radius: 50px;
  border: solid;
  border-width: 0px;
  border-color: rgba(255,255,255,0.1);
}

progress[value]::-webkit-progress-value {
    background-image: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 10px,
    #f9f9f9 10px,
    #f9f9f9 20px
    );
    border-radius: 50px;
    -moz-animation-name: move;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 0.4s;
    -moz-animation-delay: 1.5s;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: move;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 0.4s;
    animation-delay: 1.5s;

    animation-name: move;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-play-state: running;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}  

<progress  max="100" value="80"></progress>

And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?

Answer 1

Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.

body {
    background-color: #666;
}
div {
    background-color: #999;
    border-radius: 30px;
    height: 30px;
    
}
div > div {
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
    background-size: 28px 30px;
    animation: progress 2s linear infinite;
    width: 50%;
}
@keyframes progress {
    0%   { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

<div><div></div></div>