Transition and animation with CSS3

Traditionally, programmers have used custom JavaScript code to create movement in page elements, which can be tricky to implement in a cross-browser way. It would be better if there were easier ways to add simple effects to elements on the page.

These capabilities are currently being introduced in CSS3, in the form of transitions, transformations, and animations. They already have support to varying degrees in most browsers.

In the following simple example, we add a transition effect (in those browsers that support it) to change the background color on link hover. As the background color changes, a transition effect will smooth out the transformation.

Here’s the code for our example link:

Following are the CSS declarations showing the original and hover background colors, and the declarations used to carry out the transition effect in the various different browsers. Note the range of different prefixes required, as discussed earlier in this section. The last declaration, without a prefix, will be the one required once the technology moves from an experimental to a finished status.

a.trans {
background: #669999;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
} a.trans:hover {
background: #999966;
}