Chapter 6
CSS3 Keyframe Animations for
Web Content
As you saw in the previous chapter, the syntax of the CSS Animation module is more powerful than the Transitions
syntax, allowing for far greater control of web content through the use of keyframes. This chapter will illustrate
that power through several examples: a cycling slideshow, an image gallery that duplicates the appearance of the
classic Lightbox plug-in for JavaScript, and a logo animation.
A Simple CSS3 Slideshow
Traditionally, image gallery slideshow effects were created using Flash or JavaScript, often in the form of a framework
plug-in, such as Nivo Slider (http://nivo.dev7studios.com) and Camera (www.pixedelic.com/plugins/camera).
While there are advantages to using a framework/plug-in approach (primarily in the variety of transitions available),
there are a number of advantages in completing your slideshow in CSS3 too, as you’ll see in a moment.
The HTML Code
Marking up the images for a CSS3 slideshow is a fairly straightforward process: you place the images inside a
container which moves as a strip through another “window” element that is the same size as each individual
image in the strip (see Figure 6-1).
500px
2000px
Figure 6-1. Organization of a CSS slideshow (red “window” container drawn larger for emphasis)