Pro CSS3 Animation

Chapter 6 ■ CSS3 Keyframe animationS for Web Content

Then you call the animation sequence. Unlike transitions, keyframe animations do not require an initiating
event, meaning that this animation will run on page load, as shown in Listing 6-4.

Listing 6-4. Keyframes for a Simple Image Slider

figure#imagestrip { animation: slider 10s infinite; }

You’ll find that this works, but there’s just one problem: the last movement on the end reveals an empty window,
as there is no image beyond 2000 pixels for the image strip to show. You fix this by introducing a bit of a cheat, placing
a copy of the first image at the end of the strip, lengthening the strip as a whole to 2500 pixels in our CSS (Listing 6-5).

Listing 6-5. Modified HTML Code for a Basic CSS3 Slideshow

As the last keyframe now visually matches the first, this creates a complete smooth animation sequence.

A Variation with Background Images

You can create an equivalent effect using only background images—for example, to create a slideshow behind
a banner element or logo. This will simplify your code to a single

, but will complicate your CSS
somewhat. (Note that you will repeat the first image at the end of the background list just as you did in the above
examples, and for the same reason. See Listing 6-6.)

Listing 6-6. HTML and CSS Code for a Slider Using Background Images