Animating with CSS Keyframes - Beginning CSS3 - page 474

In animation_1.html, the <h1> heading is animated using the animated shorthand property like this:

animation: bounce 2s ease-out;

There's only one time value, so it represents the duration. No values are set for the number of iterations
or direction, so the animation runs only once in the normal direction. It drops the heading into position and
bounces it twice before coming to a halt. The shorthand is the equivalent of the following individual rules:

animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease-out;

Applying Multiple Animations
In animation_2.html, a second animation is added to the heading by adding another definition to the shorthand
property after a comma like this:

animation: bounce 2s ease-out,
glow 2s 2s ease-out forwards;

The second animation called glow adds an animated text shadow. It has two time values, the first one is
the duration and the second is the delay before the animation starts. There's no number or direction, so the
animation runs only once in the normal direction. But animation-fill-mode is specified as forwards ,
so the property values in the final keyframe are preserved (see Figure 21-6 ).

Figure 21-6. The text shadow defined in the last keyframe is preserved after the animation

The shorthand is the equivalent of the following individual properties:

animation-name: bounce, glow;
animation-duration: 2s, 2s;
animation-timing-function: ease-out;
animation-delay: 0s, 2s;
animation-fill-mode: none, forwards;

The values for each property are separated by commas and are applied to the animations in the same order
as they're listed in animation-name . When using the individual properties like this, you need to specify default
values explicitly unless they're shared by all animations. For example, the bounce animation runs immediately,
but glow is delayed by two seconds. In the shorthand version, the delay isn't specified for bounce . But when the
individual properties are used, it needs to be set to 0s . Otherwise it would have the same delay as glow .

■ Delaying an animation by the same amount as the duration of its predecessor(s) has the effect of running
animations in sequence, making it easier to build and maintain the keyframes.

Tip