Cambiar camaño de una imagen gradualmente?

[Tecktonikrazy]

Para cambiar el tamaño de una imagen onmouseover seria algo como:

Código HTML:

<img id="imagen" src="imagen.jpg" onmouseover="cambiarTamaño('100','100')" onmouseout="cambiarTamaño('50','50')">

<script language="javascript">


function cambiarTamaño(ancho,alto){

document.getElementById('imagen').style.width = ancho + 'px';
document.getElementById('imagen').style.height = alto + 'px';

}

</script> 

Pero como hago para que esto ocurra gradualmente, es decir que el tamaño aumente o disminuya poco a poco y no de golpe?