Meine Herren!

Was sollen denn die möglichen Damen nur sagen ;-))

Als Faustregel für den Einsatz von CSS-Animationen oder -Transitionen kann man sagen, dass Animationen immer dann geeignet sind, wenn die Bewegung automatisch ablaufen soll. Transitionen benutzt man dagegen, wenn man einen eigenen Auslöser braucht. Zum Beispiel eine Benutzerinteraktion.

Eine Animation ist für dich also genau die richtige Wahl.

Das sieht schon recht gut aus, allerdings wird die Endgröße im CSS vorgegeben und die ist mir ja da nicht bekannt, da die tatsächliche Breite erst beim Seitenaufbau (über PHP) berechnet wird.

Für den Fall kannst du relative Maßangaben benutzen: % bietet sich hier an.

relative Angaben lösen das Problem auch nicht.
Ich erzeuge ja ein waagerecht verlaufenes Balkendiagramm.
Die Länge des Balken entspricht der Länge der Grafik.
Wenn ich also beispielsweise die User / Kernel / IOWait und Idle-Time eines Systems grafisch darstellen möchte, die ich aus einer Textdatei übermittelt bekomme,
dann ergeben sich jedesmal gegebenenfalls völlig andere Werte, die ich nicht in Prozent darstellen kann.

Ich habe es jetzt etwas anders gelöst (und es funktioniert):

• Im Body ein Onload="start_animation()"
• Im Img-Tag eine eindeutige ID (fängt aber immer mit "A_" an), die CSS-Klasse und das zweckentfremdete ALT-Attribut

  
<img class="fadein" ID="A_IDLE" src="bild.jpg" width="1" height="8" alt="<?=$calculated_width;?>">  

• im CSS

  
	img.fadein {  
		-webkit-transition: width ease 2.5s;  
		transition: width ease 2.5s;  
	}  

• und die Javascript-Funktion:

  
	function start_animation() {  
		// hole alle img-Tags  
		var allMyPrettyImgs = document.getElementsByTagName('img');  
		for(var i = 0; i < allMyPrettyImgs.length; i++) {  
			imgid = allMyPrettyImgs[i].id;  
			if (imgid.indexOf("A_")==0) {		// wir wollen nur die IMGs, die mit "A_" anfangen  
				// Wert aus ALT-Tag holen  
				imgobj = allMyPrettyImgs[i];  
				wert = imgobj.alt;  
				imgobj.width = wert;  
			}  
		}  
	}  

Klaus