HTML and CSS Reference
In-Depth Information
SELECTING TRANSITION LENGTH
So far so good, but you need one addition to get the basic example working: You
need to set a duration over which the transition will occur. This is done using the
transition-duration
property:
a {
.
transition-property: background-color;
transition-duration: 0.5s;
}
This property can take values with any CSS time units, but you'll pretty much
always use seconds.
DELAYING TRANSITIONS
If you want to set up a delay between the state changing on the element to be
transitioned and the transition occurring, you can use the
transition-delay
property, like so:
transition-delay: 2s;
This property is useful if you want to fire multiple transitions but want them
to happen one after the other in a staggered fashion.
ALTERING THE RATE OF TRANSITIONS
By default, transitions occur at the same rate throughout their duration. This is OK
for many uses, but in some cases you'll want to vary the transition rate to emulate
concepts such as acceleration, friction, or gravity. To apply such variations to your
transitions, you can use the
transition-timing-function
property.
