Animacion css y javascript

[Ddsdone]

Tengo lo siguiente:
Javascript:

Código Javascript:

var objeto = document.getElementById("pj"),
    boton = document.getElementById("boton-dragon");
 
boton.addEventListener("click", function(){
    objeto.style.height = objeto.style.height == "200px" ? "auto" : "200px";
}, false);;
 

Css:

Código CSS:

#pj {
    background-color:#333;
    color:#fff;
    width:400px;
    height:auto;
    overflow:auto;
    border-radius:6px;
    padding:5px;
    text-align:center;
    margin:10px;
    transition: all 300ms ease ;
}
#boton-dragon {
    background-color: RGBA(255, 100, 120, 0.1);
    color:#fff;
    width:100px;
    height:20px;
    border-radius:6px;
    padding:5px;
    text-align:center;
    margin:10px;
}
#boton-dragon:hover {
    background-color:RGBA(255,255,255,1);
    color:#333;
}
 

HTML:

Código HTML:

<div id="pj">
    <div id="boton-dragon">Hola</div>
</div>
 

Cuando le doy click al boton me agranda la ventana "pj" pero no lo hace con una animacion, sino que solo cambia de la nada.

Existe forma de animarla?

http://jsfiddle.net/64b4x/

[PHPeros]

Puedes darle un poco más de duración, porque 300 milisegundos son impredecibles

[herran1212]

Hazlo con css es mejor, y aplicas la animacion en los estilos, revisa este enlace:
http://animateyourhtml5.appspot.com/pres/index.html#1
Espero te sirva

[Ddsdone]

El tema que necesito que un boton externo al "objeto a modificar" sea el que comience la animacion, el Boton al click hace que el objeto realice una accion por modificacion de css, el tema que el cess no lo toma como animacion. "300ms" es una animacion rapida y sutil.

ese es mi problema actual.

[Ddsdone]

Lo solucione. le habia puesto "height:auto;" cuando debe estar delegado si o si un "px" para que la animacion funcione. Excelente gracias