Wie Transition auslösen?

[Klaus]

Hallo,

ich habe einen Farbbalken als DIV im CSS zunächst mit der Breite 0px beschrieben:

  
#balken_yellow {  
	height:20px;  
	width:0px;  
	background: rgb(254,252,234);  
	background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 48%, rgba(254,252,234,1) 100%);  
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(48%,rgba(241,218,54,1)), color-stop(100%,rgba(254,252,234,1)));  
	background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);  
	background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);  
	background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);  
	background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);  
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fefcea',GradientType=0 );  
	transition: width 2.8s linear;  
	-moz-transition: width 2.8s linear; /* Firefox 4 */  
	-webkit-transition: width 2.8s linear; /* Safari and Chrome */  
	-o-transition: width 2.8s linear; /* Opera */  

Wie muss ich das DIV-Element angeben, damit es beim ersten Anzeigen die Animation auslöst?

  
<div id="balken_yellow" style="width:140px;"></div>  

Funktioniert leider nicht, zumindest passiert nichts.

Und auch per Javascript im Anschluss

  
document.getElementById("balken_yellow").style.width = "70px";  

tut sich nichts.