@keyframes colorize {
    0%    { background: #ff79b4;}
    8%{ background: #99a0ff;}
    50%                      { background: #f0362e;}
    80%                  { background: #2d4cff;}
    100%                  { background: #ff79b4;}
}

.colorbar{
    background-color: transparent;
    animation-name: colorize;
    animation-duration: 5s;
    animation-iteration-count: infinite;

}

@keyframes bar{
   from{
       left: -100%;
   } to{
         left:100%;
     }

}

.bar{
 width: 40%;
    height: 100%;
    left: -100%;
    background: rgba(255,255,255,0.3);
    background: -moz-linear-gradient(left, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0.2) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0.3)), color-stop(48%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0.2)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0.2) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0.2) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0.2) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    position: absolute;
    animation-name: bar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}