Moving Gradient Bar

by Ayyappan Sakthivadivel

HTML

<!DOCTYPE html>
<body>
    <div class="background">
        <div class="movement"></div>
    </div>
</body>

CSS

.movement 
{
background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(48%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );

    width: 200px; 
    height: 5px; 
    position: relative;
    -webkit-animation: gradient 6s linear infinite;
    animation: gradient 6s linear infinite;
}
.background 
{
    width: 500px;
    overflow: hidden;
    height: 5px;
    background-color: #f00;
}
@-webkit-keyframes gradient
{
    0%   {left: -200px;}
    100% {left: 500px;}
}
@keyframes gradient 
{
    0%   {left: -200px;}
    100% {left: 500px;}
}