Animating with CSS Keyframes - Beginning CSS3 - page 472

Figure 21-4. Clicking the animations toggles them on and off
Delaying an Animation
The animation-delay property works exactly the same way as transition-delay , which was described in the
previous chapter. It delays the start of an animation by the amount specified in seconds ( s ) or milliseconds ( ms ).
If you specify a negative value, the animation starts immediately, but at the point it would have reached at
the specified offset. So, if the animation is four seconds long, and animation-delay is set to minus two seconds,
it begins halfway through.
Controlling Properties Before and After Animation
The animation-fill-mode property controls the state of an element before and after an animation. For example,
if an element changes color during the animation, you can choose whether to preserve that color or return to the
original one when the animation finishes. It accepts the following values:
none This is the default. Properties return to their original state when the
animation ends.
forwards Properties retain values set by the final keyframe.
backwards If the animation is delayed by animation-delay , properties assume values
set by the first keyframe while waiting for the animation to start.
both Values set by the first and last keyframes are applied before and after the
animation.
To demonstrate how this affects animated elements, animation-fill-mode.html contains four squares
alongside play buttons. When you click a play button, it applies the animated class to the square next to it, and
sets the square's animation-name to slideback . The slideback keyframes cause the square to jump 500px to the
right and then slide back to its original position like this:
@keyframes slideback {
from {
transform: translateX(500px);
}
to {
transform: translateX(0);
}
}