Ho scritto un codice di test per capire dov'è che sbaglio nella realizzazione di un'animazione all'interno di un mio script.

codice:
<div id="box" style="background: #FF0000; height: 200px; width: 200px;"></div>
<script type="text/javascript">
var timeline = 100
var l = 0
while (l < 300) {
	l = l + 1
	var t =setTimeout(document.write("test 
"), timeline)
	timeline = timeline + 100
}
</script>
Quello che voglio ottenere qui è che il box si sposti lentamente verso destra fino a fermarsi a 300px dal limite sinistro della pagina.

Il risultato però è diverso. Il box comprare per un appena percettibile istante tutto a sinistra, ma un attimo dopo si sposta 300px più a destra in un colpo solo, senza animazione.

Dove sbaglio?