Dreamweaver CS6 How to: CSS Transitions

Excerpted from Dreamweaver CS6 New Features video training course on lynda.com.

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.

In the past, much of this kind of interactivity was the result of JavaScript, but nowadays more can be accomplished with just CSS. CSS transitions offer a way to create animations for responsive web pages that otherwise would require JavaScript.

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.

Working with CSS3 Transitions

Dreamweaver CS6 New Features | by James Williamson