Dreamweaver CS6: The Missing Manual

CSS Transitions

In Chapter 4 you learned about the :hover pseudo-class, which lets you change the style of a link as a visitor mouses over it. For example, the background color of a link in a navigation bar might be deep blue, but when a visitor mouses over that link, the background changes to bright orange. That change, from blue to orange, is instantaneous, but it might feel a bit abrupt to some. What if you could animate the change so that the link starts out blue and then morphs, moving through a range of colors on the way to turning solid orange. When you mouse off the link, the color would animate back from orange to blue. Now that would be cool…and, thanks to CSS3’s new CSS Transitions property, it’s easy to achieve.

In a nutshell, a CSS transition is an animation between one or more CSS properties to another set of CSS properties. Web browsers handle the animation: You only need to supply the starting point (the blue background of a link, for instance) and the ending point (the orange background). You also need to add the CSS Transition property, which, unfortunately, requires a fair amount of code. However, Dreamweaver CS6 provides a simple, straightforward tool for creating that code: the new CSS Transitions panel. Here’s how you use it:

Note

CSS transitions are fun and look great, but they’re relatively new, so not all browsers support them. While Safari, Firefox, and Chrome understand CSS transitions, only version 10 of Internet Explorer (which isn’t even shipping at the ...