Chapter 5 ■ CSS3 Keyframe animationSPausing Keyframe Animations
Animations can be paused by changing the value of the animation-play-state property. To the code of
Listing 5-9 and 5-10, you can add the code in Listing 5-11.
Listing 5-11. Pausing a CSS3 Animation
#wrapper:hover #ball, #wrapper:hover #shadow {
animation-play-state: paused;
}
Because the default value of animation-play-state is running, the animation will resume when the mouse
moves out from hovering over the wrapper div. As you will see in the Chapter 6, it is entirely possible to set
running and paused states through other means.
Summary
CSS3 Animations utilizing keyframes provide greater opportunities for animating HTML elements on web pages
with far more variations than those created through Transitions. While building prefixed support for older browsers
can be a somewhat arduous process, the essential syntax makes CSS3 animations much more effective and fun.
While a number of the properties share commonalities with the Transitions module, the animation-fill-mode
is very different: while elements affected by CSS3 Transitions normally returnto their initial state, it is unusual for
fully-fledged animations to do so, requiring care with both animation-direction and animation-fill-mode.
In the next chapter, you’ll use the syntax you learned here to create advanced animation of web content,
including image slideshows.