Chapter 5 ■ CSS3 Keyframe animationS
This repetition obviously builds up as you write in support for other older browser versions; some of the
tools discussed in Chapter 10 can ease and automate this process.
Controlling Keyframe Animation Playback
If you try to play back the animation you have created, you’ll see that the element resets to its initial state. If you
want the element to stop at the final frame, you have several options.
• Set a long animation-duration for the element, letting it essentially take forever to get to
the final frame.• Set the animation-direction so that the element winds up in the same place.• Set animation-fill-mode to forwards.The animation-fill-mode is rather oddly named, but serves a particular purpose, shown in Table 5-1.Table 5-1. Animation fill-mode Property Values
Fill Mode Description
forwards Element position ends on final frame.
backwards Element returns to position of first frame.
both Sets the element to the position of the first keyframe immediately on page load, regardless
of the element’s default location in other CSS. Only applicable if animation-delay has a
value greater than 0.
none Element starts and ends at initial default position provided by CSS outside of keyframes.
You can also return animation sequences using animation-direction, as shown in Table 5-2.Table 5-2. Animation-direction Property Values
Animation Direction Description
normal Animation plays forward normally
alternate Animation plays forward then reverses, returning to its initial position
reverse Animation plays backward
alternate-reverse Animation plays backward on the first playthrough, reverses for
normal playback on the second