Warum startet Transistion nicht?

[Klaus]

Hallo,

über PHP erzeuge ich wie folgt ein Balken-Chart, der animiert werden soll.
Der Javascript-Teil ändert zwar die Weite des Div, aber die Transistion startet nicht.
Liege ich eventuell mit der Vermutung richtig, dass das Javascript bereits ausgeführt wird, bevor die Seite fertig geladen wurde und daher die Transition nicht startet, da dadurch quasi keine Änderung erkannt wird?
Wie könnte ich es ansonsten sinnvoller lösen?

  
						<div class="statbez"><?=$vorname;?> <?=$nachname;?></a>:</div>  
						<div class="stat_wrapper">  
							<div ID="STAT_<?=$pnr;?>" class="stat_black"></div>  
						</div>  
						<div class="statwerte"><?=$anz;?></div>  
						<script type="text/javascript" language="javascript">  
							document.getElementById("STAT_<?=$pnr;?>").style.width = '<?=$laenge;?>px';  
						</script>  

der CSS-Code sieht so aus:

  
.stat_wrapper {  
	width:300px;  
	height:20px;  
	float:left;  
	margin: 5px 5px;  
	border-radius:5px;  
	background: rgb(255,255,255);  
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);  
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));  
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);  
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);  
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);  
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);  
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );  
}  
.stat_black {  
	height:20px;  
	width:0px;  
	background: rgb(91,89,89);  
	border-radius: 5px;  
	background: -moz-linear-gradient(top,  rgba(91,89,89,1) 0%, rgba(4,5,1,1) 50%, rgba(4,5,0,1) 51%, rgba(142,136,135,1) 100%);  
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,89,89,1)), color-stop(50%,rgba(4,5,1,1)), color-stop(51%,rgba(4,5,0,1)), color-stop(100%,rgba(142,136,135,1)));  
	background: -webkit-linear-gradient(top,  rgba(91,89,89,1) 0%,rgba(4,5,1,1) 50%,rgba(4,5,0,1) 51%,rgba(142,136,135,1) 100%);  
	background: -o-linear-gradient(top,  rgba(91,89,89,1) 0%,rgba(4,5,1,1) 50%,rgba(4,5,0,1) 51%,rgba(142,136,135,1) 100%);  
	background: -ms-linear-gradient(top,  rgba(91,89,89,1) 0%,rgba(4,5,1,1) 50%,rgba(4,5,0,1) 51%,rgba(142,136,135,1) 100%);  
	background: linear-gradient(to bottom,  rgba(91,89,89,1) 0%,rgba(4,5,1,1) 50%,rgba(4,5,0,1) 51%,rgba(142,136,135,1) 100%);  
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5959', endColorstr='#8e8887',GradientType=0 );  
	transition: width 1.0s linear;  
	-moz-transition: width 1.0s linear; /* Firefox 4 */  
	-webkit-transition: width 1.0s linear; /* Safari and Chrome */  
	-o-transition: width 1.0s linear; /* Opera */  
}  
  
.statbez,.statwerte { float:left; margin: 5px; }  
.statbez { width: 120px; }  
.statwerte { width: 50px; }