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

Solution 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.

Solution 2

CSS3 will make this very easy for you! It will add a transition, and you can change the dimensions with :hover. Here's the sample div:

<div id="mydiv">
    <!-- Div content goes here -->
</div>

So, your div is "mydiv". The rest is done in CSS3:

#mydiv {
    width: 50px;
    height: 50px;
    background: #f34543;
    -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;
}
#mydiv:hover {
    width: 100px;
    height: 70px;
}

JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/

That's it! It will resize it from 50x50px to 100x70px. Tested on Chrome, but not Safari, yet.

Solution 3

@keyframes animationName {
    0% {width: 50px; height:50px}
    100% {width: 100px; height:70px}
}

take a look at this: http://www.css3files.com/animation/

Comments

[Francesco]

mmm not sure it helps, i need to dynamically input the size of the div

[WolvDev]

If you want to dynamically input the size, you can only use JS to do so.

[Mircea]

No you don't. Here is how: jsfiddle.net/4zD74. You can also add that as a new styleSheet.

[Mircea]

So? He needs dynamic values. You won't see that in CSS for some time.

[itsariadust]

Can you make a JSFiddle

[itsariadust]

This is the best answer!