Css3 webkit css animation: resizing a rectangle div

Question

I am trying to figure out if it is possible to replicate the animate method in jQuery using webkit animation

Assuming I have a 50px by 50 px div 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 

Wondering how to do the same if possible using WebKit CSS animation

PS. I don’t need them to work in firefox, this is just a project for 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 with jQuery:

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

So, if the browser supports it, it will be animated. But, of course, consider the possibility of placing these properties in 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 a click event (the window will be enlarged when pressed, and when pressed again, it will be resized to normal size).

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

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

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

Also, if you want the animation to be performed by mouse, all you need to add is:

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

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

In addition, you should read the CSS3 transition attribute and conversion functions (they can be used in many cases). They are described here .

Answer 2

CSS3 will make it very easy for you! It will add a transition, and you can resize with :hover . Here's a 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/

What is it! It will resize it from 50x50px to 100x70px. Tested in Chrome, but not Safari.

Answer 3

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

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

Answer 4

You can use animations and CSS transitions with "dynamic" values, applying CSS as a new style or inline style, as in this case:

http://jsfiddle.net/4zD74/