Dreamweaver CS6 How to: CSS Transitions
When it comes to browsing the web, we’ve come to expect dynamic page elements that respond smoothly to our clicking and hovering, not to navigate to a new page, but to show or hide objects on the current page via animation. In other cases, we may want objects that change size or color in response to our input.
Dreamweaver CS6 has a new panel to help you create and edit CSS transitions. With it, you can select page elements and apply smooth changes to properties like the color, position, and size of text and objects. You can choose the triggering events and set properties like the duration and easing of the animation.
In this video from Lynda.com, James Williamson demonstrates how to use the CSS Transitions panel to grow the height of objects as you hover over them. When you move your cursor away, the objects return to their original size. It’s a great technique for displaying extra text just when readers want it, and not making them navigate to a new page.