CSS 3アニメーションプログレスバー

CSS 3アニメーションプログレスバー
<!--
@-webkit-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
@-moz-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
@-ms-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
@keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
.progress{
width: 300px;
height: 25px;
background-color:rgba(1,190,1,1) ;
box-shadow: 0px 2px 0px rgba(255,255,255,0.5) inset;
border-radius: 5px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
-webkit-animation:move 1s linear infinite;
-moz-animation:move 1s linear infinite;
-ms-animation:move 1s linear infinite;
-o-animation:move 1s linear infinite;
animation:move 1s linear infinite;
}
-->
 
CSS CODE:

@-webkit-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    @-moz-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    @-ms-keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    @keyframes move{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 30px 30px;
        }
    }
    .progress{
        width: 300px;
        height: 25px;
        background-color:rgba(1,190,1,1) ;
        box-shadow: 0px 2px 0px rgba(255,255,255,0.5) inset;
        border-radius: 5px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
        background-image: -moz-linear-gradient(
          -45deg, 
          rgba(255, 255, 255, .2) 25%, 
          transparent 25%, 
          transparent 50%, 
          rgba(255, 255, 255, .2) 50%, 
          rgba(255, 255, 255, .2) 75%, 
          transparent 75%, 
          transparent
       );
        background-image: linear-gradient(
          -45deg, 
          rgba(255, 255, 255, .2) 25%, 
          transparent 25%, 
          transparent 50%, 
          rgba(255, 255, 255, .2) 50%, 
          rgba(255, 255, 255, .2) 75%, 
          transparent 75%, 
          transparent
       );
        -webkit-animation:move 1s linear infinite;
        -moz-animation:move 1s linear infinite;
        -ms-animation:move 1s linear infinite;
        -o-animation:move 1s linear infinite;
        animation:move 1s linear infinite;
    }

HTML CODE:

<div class="progress"></div>

ここで2つのポイントは次のとおりです.
background-size  background-image
中間の白いバーのサイズはbackground-sizeで制御でき、色はbackground-image rgbaで制御できます.