Transitions and Animations 173
This code seems like quite a lot to write for each transition. But, as
with all of the other CSS properties that are part of a “family” (background-*,
border-*, and so on), the transition-* family has a shorthand. Here’s the
syntax:
E { transition: property duration timing-function delay; }
One important thing to be aware of here is that there are two time
values: transition-duration and transition-delay, which must be declared
in that order. If only one is declared, the syntax presumes it is transition-
duration, and the transition-delay will be set at the default (or inherited)
value.
If you use the values from the example transition with the shorthand
property, here’s the result:
h1 { transition: font-size 2s ease-out 250ms; }
It’s quite apparent that this is a lot less code to write.
The Complete Transition Example
Now that I’ve explained all of the component properties, let’s take a look at
the example transition in action. The full code is shown here:
h1 {
font-size: 150%;
transition: font-size 2s ease-out 250ms;
}
h1:hover { font-size: 600%; }
Figure 14-4 shows what happens when I pass my mouse over the h1
element.
Figure 14-4: Three stages of an animated transition on the font-size property
Obviously, I can’t show the full animation on the printed page, but the
illustration shows three stages of the transition: the initial, pre-transition
stage (left) with a font size of 150 percent; an intermediate, mid-transition
stage (center), which is just under two seconds into the animation when the
font size has increased; and the final, post-transition stage (right) where
the font size is 600 percent.
