text: Page 2 - CSS3 Transitions: Width and Height Properties
  Home Style Sheets Page 2 - CSS3 Transitions: Width and Height Properties
  CSS3 Transitions: Width and Height Properties
  If you enjoyed the first part of this two-part tutorial on using CSS transitions, you'll love the conclusion. You'll learn how to transition the "width" and "height" properties of a generic HTML container.
  · CSS3 Transitions: Width and Height Properties
  · Using CSS3 transitions with the height property of an HTML element
  CSS3 Transitions: Width and Height Properties - Using CSS3 transitions with the height property of an HTML element
  I'm not dismissing the importance of all the examples developed so far, but in my personal opinion, transitioning the height of a block-level element can be extremely useful. The process allows you to easily create animated drop-down menus without having to use jQuery or any other JavaScript library.
  For the moment, however, I'd like to keep the complexities of a project like this out of this article's scope. So, pay attention to the following code sample, which applies this type of transition to a single div:
  <title>Using CSS3 transition (transitioning the 'height' property)</title>
  font: normal 0.9em Arial, Helvetica, sans-serif;
  /* transitioned element */
  background-color: #e27523;
  <h2>Height transition</h2>
  Definitely, the above example is fairly straightforward, since it looks quite similar to the one that you learned in the preceding segment. In this case, the transition has been applied to the "height" property of the target element. If you try out the previous web page on your own browser, you should see the selected div expanding and shrinking alternately when you're hovering on it, but this time in a vertical direction.
  So far, so good, right? At this point, you've seen for yourself that individually transitioning the height and width of an element is a breeze to achieve. But, if you're anything like me, you're wondering if it's possible to perform a transition with the two properties at the same time. The answer is a resounding yes! And to prove that my claim is true, in the forthcoming section I'll be creating a final example. It will implement this "parallel" transition in a snap.
  To see how this will be done, just keep reading.
  Simultaneously transitioning the "width" and "height" properties of a target element
  As I promised in the section that you just read, I'd like to finish this tutorial by showing you how to simultaneously transition the "height" and "width" properties of the same target div defined previously. As you may have guessed, the implementation of this parallel effect is a no-brainer process, which the following code fragment demonstrates:
  <title>Using CSS3 transition (transitioning the 'width' and 'height' properties)</title>
  <h2>Width and height transition</h2>
  That was really simple to code and read, wasn't it? As you can see above, simultaneously transitioning two or more properties of a given HTML element is a breeze to achieve. Moreover, in this case, the type of transition and the duration given to the selected properties are exactly the same; it's possible, though, to assign different algorithms and durations to each property and obtain interesting variations of the original effect.
  But before you start tweaking the earlier example, feel free to test it with your own browser. As you would expect, the target div will expand/contract vertically and horizontally when the mouse is placed over it. That's not too bad at all, considering that the effect has been implemented only with pure CSS!
  And now that you have a clearer idea of how to take advantage of the functionality provided by CSS3 transitions, go ahead and start using them for enhancing the behavior of your web pages. It'll be an instructive and fun experience, believe me.
  Over the course of this two-part tutorial, I provided you with a humble introduction to using transitions in CSS3. Even though the set of examples were admittedly quite simplistic, they came in handy for demonstrating how easy it is to "animate" different properties of an HTML element without having to write a single line of JavaScript.
  Moreover, when used in a clever way, transitions can be a powerful tool that will let you enhance your user interfaces in all sorts of creative ways. As with many other CSS features available out there, be careful and use them with due responsibility.