Es ist gewollt, dass sich _nur_ die Breite ändert, die Höhe muss immer konstant bleiben.
Und es muss direkt starten, nicht erst bei einem Hover.

Vielleicht hilft dir der Ansatz weiter ;)

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.

Muss ich hier eine Javascript-Funktion lösen, die dann die Breite ändert?
also sowas ähnliches wie:

  
img.animateit {  
    -webkit-animation: balken 5s;  
    animation: balken 5s;  
}  

  
<img id="test" class="animateit" src="bild.jpg" width="1" height="100" />  

  
<script type="text/javascript" language="javascript">  
getElementById('test').width="500px";  
</script>  

Ich vermute, das funktioniert nicht, weil das Javascript erst ausgeführt werden dürfte, wenn die Seite fertig geladen wurde.
Also die ID des Image und die End-Breite in ein Javascript-Array und eine Funktion beim onLoad-Event aufrufen, die dann das Array abarbeitet?
Das klingt ziemlich umständlich :-//

Klaus