css3 animation/transition/transform: How to make image grow?

Question

I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too)

I was using jquery .animate() but its just too choppy for my liking... I know I can use the :

-webkit-transform: scale(2);

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

Any help?

Thanks

Answer 1

You're looking for the -webkit-transition property for webkit. That allows you to specify two separate CSS rules (for instance, two classes) and then the type of transition to be applied when switching those rules.

In this case, you could simply define the start and end heights (I did both height and width in the example below) as well as defining -webkit-transition-property for the properties you want transitioned, and -webkit-transition-duration for the duration:

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 also posted a pretty good write-up on CSS Visual Effects.

However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.