HTML and CSS Reference
In-Depth Information
Each square has a different value for
animation-fill-mode
, as indicated by the label next to the play button.
However, they all share the following animation properties:
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: 2;
animation-direction: alternate;
animation-delay: 2s;
To show how
animation-fill-mode
affects the animation, there's a two-second delay at the start. The
animation runs for two iterations, and
animation-direction
is set to
alternate
. When the square reaches the left
side of the screen, it starts moving back in the opposite direction. The animation comes to an end when it reaches
the right side of the screen. This is how each square is animated when you click its play button (see Figure
21-5
):
none
After the two-second delay, the square jumps to the right, slides back to the left,
and then slides to the right. At the end of the animation, it jumps back to its original
position.
forwards
The square behaves the same way as
none
, but it remains on the right when
the animation is over.
backwards
The square immediately jumps to the right of the screen, pauses for two
seconds, then moves back and forth across the screen. At the end of the animation, it
jumps back to its original position.
both
The square behaves the same way as
backwards
, but it remains on the right when
the animation is over.
Figure 21-5.
Two squares return to their original position, while the others retain the properties set by the final
keyframe
■
Note
Clicking the stop button removes the
animated
class, resetting the square to its original position.
Using the animation Shorthand Property
The
animation
shorthand property lets you define one or more animations in a single declaration. It accepts
values for all the individual properties except
animation-play-state
. Like the
transition
shorthand property,
the first time value is interpreted as the duration, and the second (if present) is interpreted as the delay.
