It's already possible to change CSS properties on the fly through pseudo-classes (like hover) or with JavaScript code. Prior to CSS3, all CSS state changes happened instantly. With the new transition attribute, you can cause transitions to happen over time.
Look at a simple h1 heading:
<h1>Transition Demo</h1>
The CSS code is mainly quite straightforward:
h1 { color: black font-size: 300%; transition:color 1s ease-in; }
h1:hover { color: red; }
Begin by ignoring the transition attribute. If you look at the rest of the code, it's easy to see what it does. In the normal state, the heading is black. In the hover state, the color is red. Typically, the heading turns red as soon as the mouse hovers over it, and will instantly turn black when the mouse leaves.
However, when the transition attribute is added, the color change is not immediate, but takes a second. The color gradually changes from black to red and back.
Transitions are even more interesting when you pair them with transformations. Imagine a very simple div:
<div id = "box">Box 1</div>
Apply a little CSS3 magic and when the user hovers over the div, it rotates smoothly until it is upside-down. When the user leaves the div, it smoothly rotates back to its original position:
#box { transition: all 1s ease-in; height: 100px; width: 100px; border: 1px solid black; }
#box:hover { transform: rotate(180deg); }
The transform is defined in the: hover pseudo-class. The only new element is the transition specified in the class’ standard style.
The transition attribute takes several parameters:
animation property: The type of animation defined by this tag. The default value is all, but other types are expected to work, including color, length, width, pecentage, opacity, and number. If in doubt, use the standard all.
duration: The length of the animation in seconds. One second is 1s.
timing function: If you want the animation to occur at a constant speed, use . If you want a more natural motion that gradually speeds up and slows down at the ends of the animation, use one of the following: ease, ease-in, ease-out, ease-in-out.
delay: If you include a second time value, this will be considered a delay. The animation will not begin until after the delay.
If you prefer, you can use individual properties for the various parts of the animation, but most developer prefer the one-line shortcut (like the one used for borders).
Not all CSS attributes can be animated, but many can be. It may require some experimentation to determine which CSS attributes can be animated with the transition attribute.
Unfortunately, the stock transition attribute is not supported by any major browsers, but there are vendor-specific versions for Mozilla (-moz-), webKit (-webkit), and Opera (-o-). Your best bet until support is widespread is to include all vendor-specific versions in addition to the standard version.
