Ampliar imagem suavemente ao passar o mouse com javascript

[Visitante]

Estou tentando criar um efeito para quando eu passar o mouse em cima da imagem ela aumente SUAVEMENTE, aumente devagar, por exemplo no primeiro milisegundo a imagem tenha 200px, depois de 1milisegundo tenha 201px depois de 2milisegundos tenha 202px e assim vai

 

eu tentei assim mas não deu certo:

function aumenta() {variavel = 100;
             while(variavel<300){  
             document.getElementById("aumentaimg").style.width = variavel+"px";

             variavel++;
            
                 }
          }

 

o problema é que o  javascript aumenta a imagem de uma vez e não aos poucos como eu queria então coloquei um temporizador:

 

setTimeout("document.getElementById('aumentaimg').style.width = variavel+'px';",1000) mas continua aumentando de uma vez...

 

Não entendi muito bem como o javascript ta trabalhando, alguém sabe porque desse problema, e como eu posso resolve-lo?

[Tomas Frota]

@Sergio Nogueira de Melo Jr, você definiu um tempo de expiração (timeout), não um temporizador. Experimenta implementar a função abaixo:

 function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  } 

 

No seu código você implementa

sleep(2000)

 para aguardar 2 segundos, por exemplo.