Bringing Your Website to Life with Transitions and Animations - CSS3 Foundations - page 225

Prefixed browser support: Firefox 4+, Chrome 1+, Opera 11.6+, Safari 3+
Now that the browser knows you want to have the transform property transition, you need to tell it how long that
transition should take—the time between going from the start to end states.
1. In the .banner-ad:hover rule set, add the following declaration:
-webkit-transition-duration: 1s;
2. Save styles.css.
Here, you specify a one-second duration between the start and end states. Hover over the banner in your browser,
and you see this happen (see Figure 14-1). Cool, right? The banner now transitions from an 80% scale to 110% over
a one-second period.
Figure 14-1 The start and end states of the banner.
The transition-duration is specified in seconds although if you want a millisecond value, you can place a
decimal point before the value; that is, .1s is the equivalent of 100 milliseconds.
transition-timing-function
Initial value: ease | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 4+, Chrome 1+, Opera 11.6+, Safari 3+