Edit in JSFiddle

<div class="elemento canimacion1"></div>
<div class="elemento canimacion2"></div>
<div class="elemento canimacion3"></div>
<div class="elemento canimacion4"></div>
<div class="elemento canimacion5"></div>
<div class="elemento canimacion6"></div>

.elemento {
  height: 25px;
  width: 0px;
  background: #77A0FF;
  color: white;
  margin-bottom: 2px;
  overflow:hidden;
}

.canimacion1{
  animation:         animacion1 3s linear infinite alternate;
  -moz-animation:    animacion1 3s linear infinite alternate;
  -webkit-animation: animacion1 3s linear infinite alternate;
  -o-animation:      animacion1 3s linear infinite alternate;
}

.canimacion2{
  animation:         animacion1 3s linear 0.2s infinite alternate;
  -moz-animation:    animacion1 3s linear 0.2s infinite alternate;
  -webkit-animation: animacion1 3s linear 0.2s infinite alternate;
  -o-animation:      animacion1 3s linear 0.2s infinite alternate;
}


.canimacion3{
  animation:         animacion1 3s linear 0.3s infinite alternate;
  -moz-animation:    animacion1 3s linear 0.3s infinite alternate;
  -webkit-animation: animacion1 3s linear 0.3s infinite alternate;
  -o-animation:      animacion1 3s linear 0.3s infinite alternate;
}  

.canimacion4{
  animation:         animacion1 3s linear 0.4s infinite alternate;
  -moz-animation:    animacion1 3s linear 0.4s infinite alternate;
  -webkit-animation: animacion1 3s linear 0.4s infinite alternate;
  -o-animation:      animacion1 3s linear 0.4s infinite alternate;
} 

.canimacion5{
  animation:         animacion1 3s linear 0.5s infinite alternate;
  -moz-animation:    animacion1 3s linear 0.5s infinite alternate;
  -webkit-animation: animacion1 3s linear 0.5s infinite alternate;
  -o-animation:      animacion1 3s linear 0.5s infinite alternate;
} 


.canimacion6{
  animation:         animacion1 3s linear 0.6s infinite alternate;
  -moz-animation:    animacion1 3s linear 0.6s infinite alternate;
  -webkit-animation: animacion1 3s linear 0.6s infinite alternate;
  -o-animation:      animacion1 3s linear 0.6s infinite alternate;
} 

@keyframes animacion1 {
   0%   {width: 0px;}
   100% {width: 300px; background-color: #B35979; }
}

@-moz-keyframes animacion1 {
   0%   {width: 0px;}
   100% {width: 300px; background-color: #B35979; }
}

@-o-keyframes animacion1 {
   0%   {width: 0px;}
   100% {width: 300px; background-color: #B35979; }
}

@-webkit-keyframes animacion1{
   0%   {width: 0px;}
   100% {width: 300px; background-color: #B35979; }
}