Css3 animation / transition / transform: How to make an image grow?

Question

I want my image to grow to 1,500 pixels in height (and hopefully the width would just automatically resize, if not, I could easily set it too)

I used jquery.animate (), but this is just too choppy for me ... I know I can use:

-webkit-transform: scale(2); 

But I want it to be set to a certain size .. not just double or triple the size of the image.

Any help?

thanks

Answer 1

You are looking for the -webkit-transition property for webkit. This allows you to specify two separate CSS rules (for example, two classes), and then the type of transition that will be applied when switching these rules.

In this case, you can simply determine the start and end heights (in the example below, both height and width), as well as defining -webkit-transition-property for the properties you want transitional and -webkit-duration-duration for a while :

 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; } 

Tested in Safari. The Safari team has also published a pretty good review of CSS Visual Effects .

However, I would also recommend taking a look at jQuery again, as the new CSS3 stuff will not be fully compatible with IE versions.