animacion con css3

hola resulta que tengo un cuadro de 50 x 50 el cual se va a alargar en un 50% el tamaño de este,
con @keyframe conseguí la animacion pero al terminar el elmento dentro del div vuelva a su estado normal
y yo quiero que el cuadro se quede estirado

codigo

Código CSS :

.anima {
   color: black;
   width:50px;
height:50px;
background:red;
animation:cuadro 2s ease;
-moz-animation:myfirst 2s ease; 
-webkit-animation:myfirst 2s ease; 
-o-animation:myfirst 2s ease; 
}

@keyframes cuadro
{
0% {width:10%;}
100% {width:50%;}
}

@-moz-keyframes cuadro 
{
0% {width:10%;}
100% {width:50%;}
}

@-webkit-keyframes cuadro 
{
0% {width:10%;}
100% {width:50%;}
}

@-o-keyframes cuadro 
{
0% {width:10%;}
100% {width:50%;}
}

recomendacion, usa jquery. mas facil jeje.

Hola, nice00xt. Prueba a ponerle el width final a tu .anima. Es decir, en vez de width:50px, pon width:50%.

También es recomendable que la versión estándar de las propiedades vaya la última, así el navegador usará ésta cuando ya haya soporte para ella.

En definitiva, el código sería:

Código CSS :

.anima {
   color: black;
   width:50%;
   height:50px;
   background:red;
   -moz-animation:cuadro 2s ease; 
   -webkit-animation:cuadro 2s ease; 
   -o-animation:cuadro 2s ease; 
   animation:cuadro 2s ease;
}

@-moz-keyframes cuadro 
{
  0% {width:10%;}
  100% {width:50%;}
}

@-webkit-keyframes cuadro 
{
  0% {width:10%;}
  100% {width:50%;}
}

@-o-keyframes cuadro 
{
  0% {width:10%;}
  100% {width:50%;}
}

@keyframes cuadro
{
  0% {width:10%;}
  100% {width:50%;}
}