O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animating Rollovers on Links with CSS3 Transitions

Problem

You want to adjust the time a rollover effect takes on a link.

Solution

Use CSS3 transition properties to set an animation on the rollover effects, as shown in Figure 7-8:

#navsite a {-webkit-transition-timing-function: linear;-webkit-transition-duration: .66s;-webkit-transition-property: background-color;}
a:link {
 color: #777;
 text-decoration: none;
}
a:visited {
 color: #333;
 text-decoration: none;
}
a:link:hover, a:visited:hover {
 color: #777;
 background-color: #ccc;
}
a:link:active, a:visited:active {
 color: #ccc;
 background-color: #ccc;
}
The background color fading out as the cursor glides over links

Figure 7-8. The background color fading out as the cursor glides over links

Discussion

The transition property is a new addition to the CSS specification introduced by Apple’s Safari browser developers, and as of this writing it is supported only by the Safari browser. Use of the transition property within Safari requires the browser proprietary extension of -webkit- for the effect to work.

Timing function

The transitioning-timing-function function states the type of animation the effect is going to take. In the Solution, the value is set to linear, which means each frame of the animation length takes the same amount of time.

Other values for transitioning-timing-function include ease, ease-in, ease-out, and cubic-bezier(x1, y1, x2, y2).

The first two values of cubic-bezier represent the transition ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required