Css3 Webkit css animations: resize a div rectangle

Question

I'm trying to understand if is possible to replicate the method animate in Jquery, using webkit animations

Assuming i have a div 50px by 50 px using jquery I can easily resize and animate it using:

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box

I wonder how to do the same, if possible using CSS WebKit animations

PS. I dont need them to work in firefox, is just a project for a Safari/Chrome

Answer 1

You can use this CSS:

div.mybox {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}

Then you can update the width and height properties using jQuery:

$(document).ready(function() {
    $("div.mybox").css({"width": "100px", "height": "70px"});
});

So, if the browser supports it, this will be animated. But, of course, consider putting these properties to a separate class and adding this class to the element. You can use the .addClass() function, like this.

$(document).ready(function() {
    $("div.mybox").addClass("enlarged");
});

Or, for example, you can use it with the toggleClass function and the click event (the box will be enlarged when clicked, and will change to the normal size when click again).

$(document).ready(function() {
    $("div.mybox").click(function() {
        $(this).toggleClass("enlarged");
    });
});

In this case, the properties should be defined in the CSS class.

div.mybox.enlarged {
    width: 100px;
    height: 70px;
}

Also, if you want the animation to happen on mouse over, then all you have to add is this:

div.mybox:hover {
    width: 100px;
    height: 70px;
}

Animations of this kind can be performed without using JS at all.

Also, you should read about CSS3 transition attribute and the transform functions (they can be usable in many cases). They are described here.