HTML and CSS Reference
In-Depth Information
transition-duration: 1s;
transition-delay: 2s, 1s, 0s ;
#box1:hover {
background-color: #006;
width: 150px;
height: 150px;
transition-delay: 0s, 1s, 2s;
The original timings have been copied into the :hover pseudo-class, but they have been reversed in the
#box1 style rule. When you hover over the box, the transition-delay timings in the pseudo-class override
those in #box1 . So, the sequence of transitions remains the same as before. However, when you move the mouse
pointer away from the box, the :hover pseudo-class no longer applies, and the timings in the #box1 style take
precedence. As a result, the height starts changing immediately, the width follows one second later, and finally
the color fades to red.
The same technique applies to timing-duration . for example, setting a two-second duration in the :hover
pseudo-class and a one-second duration in the normal state results in a slow transition when you hover over an
element, but a rapid one when you move the mouse pointer away.
Using the Shorthand Property
Instead of using the individual properties, you can define a transition in a single declaration with the transition
shorthand property. For a single property, just list the values separated by spaces. For example, the following
applies a one-second linear transition to background-color , delayed by a quarter of a second:
transition: background-color 1s 250ms linear;
When using the transition shorthand, the first time value is treated as transition-duration . The second
one represents transition-delay . If you don't want to delay the transition, use only one time value because the
default value for transition-delay is 0s .
To jump to the end state immediately after a delay, use a single time value equal to the length of the delay,
and set the timing function to step-end .
To apply the same transition values to all properties, just set the values you want to change from the initial
values listed in Table 20-3 . For example, if you want all properties to transition over half a second without a delay,
this is all you need:
transition: 500ms;
Alternatively, if you want to make it clear that all properties are affected, include the all keyword:
transition: all 500ms;
In both cases, the default ease timing function will be used.
Search WWH ::

Custom Search