Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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 ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required