Edit in JSFiddle

<div class="elemento canimacion1">Soy un elemento con animacion linear y forwards</div>
<div class="elemento canimacion2">Soy un elemento con animacion linear, infinte y alternate</div>
<div class="elemento canimacion3">Soy un elemento con animacion ease alternate, se repite 8 veces</div>
<div class="elemento canimacion4">Soy un elemento con animacion ease-in Reverse, infinite</div>
<div class="elemento canimacion5">Soy un elemento con animacion ease-in alternate-reverse, infinite</div>

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

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

.canimacion2{
  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;
}


.canimacion3{
  animation:         animacion1 3s ease 8 alternate;
  -moz-animation:    animacion1 3s ease 8 alternate;
  -webkit-animation: animacion1 3s ease 8 alternate;
  -o-animation:      animacion1 3s ease 8 alternate;
}  

.canimacion4{
  animation:         animacion1 3s ease  Reverse infinite;
  -moz-animation:    animacion1 3s ease  Reverse infinite;
  -webkit-animation: animacion1 3s ease  Reverse infinite; 
  -o-animation:      animacion1 3s ease  Reverse infinite;
} 

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

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

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

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

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