css3 animation/transition/transform: Wie kann man das Image wachsen lassen?

Question

Ich möchte mein Bild auf 1500px in der Höhe wachsen lassen (und hoffentlich würde sich die Breite einfach automatisch neu sortieren, wenn nicht, könnte ich es auch einfach setzen)

Ich benutzte jquery .animate() aber es einfach zu unruhig für meinen Geschmack ... ich weiß, dass ich das verwenden:

-webkit-transform: scale(2); 

Aber ich will es .. nicht nur doppelt oder dreifach die Bildgröße auf eine bestimmte Größe eingestellt werden.

Irgendwelche Hilfe?

Dank

Answer 1

Sie suchen die -webkit-Übergang Eigenschaft für WebKit. Dadurch können Sie zwei separate CSS-Regeln (z. B. zwei Klassen) und dann den Übergangstyp angeben, der beim Umschalten dieser Regeln angewendet werden soll.

In diesem Fall könnten Sie einfach die Start- und Zielhöhen definieren (I sowohl Höhe hat und die Breite im Beispiel unten) sowie die Definition -webkit-Übergang-Eigenschaft für die Eigenschaften, die Sie übergegangen werden soll, und -webkit-Übergang-Dauer für die Dauer:

div { 
    height: 200px; 
    width: 200px; 
    -webkit-transition-property: height, width; 
    -webkit-transition-duration: 1s; 
    -moz-transition-property: height, width; 
    -moz-transition-duration: 1s; 
    transition-property: height, width; 
    transition-duration: 1s; 
    background: red; 
} 

div:hover { 
    width: 500px; 
    height: 500px; 
    -webkit-transition-property: height, width; 
    -webkit-transition-duration: 1s; 
    -moz-transition-property: height, width; 
    -moz-transition-duration: 1s; 
    transition-property: height, width; 
    transition-duration: 1s; 
    background: red; 
} 

in Safari getestet. Das Safari-Team hat auch eine ziemlich gute Zusammenfassung auf CSS Visual Effects geschrieben.

Allerdings würde ich auch einen anderen Blick auf jQuery empfehlen, da die neueren CSS3-Sachen nicht vollständig kompatibel mit IE-Versionen sein werden.