Question

How would I go about animating a div’s change in height and width? There would not be an event that would trigger the animation, but an animation that would occur anytime the size of the (this) div changed. The idea is to animate the div’s change in size when more or less content is in the div.

Answer 1

In CSS3 you can set ‘transition’ property on any element, which will provide you with the effect that you want, without the need to worry about event triggering.

You can specify the property, duration and function (type) of the animation, as shown below:

#divWithAnimation
{
    transition: height 1s linear;
}  

Although the property “transition” is not supported in IE, other browsers use their own prefixes, as follows:

#divWithAnimation
{
  -webkit-transition: height 1s linear;
  -moz-transition: height 1s linear;
  -ms-transition: height 1s linear;
  -o-transition: height 1s linear;
  transition: height 1s linear;
}

You should use all of these in your stylesheet, in order to provide support for all the available browsers. More info and tutorials about transitions (and other cool features of CSS3) can be found on the W3Schools website.

There is a very nice CSS3 generator that can generate the code for all the browsers. Would definitely recommend it.