Chapter 6 ■ CSS3 Keyframe animationS for Web Contentfigure#imagestrip {
width: 500px; height: 400px;
background: #000; box-sizing: border-box; overflow: hidden;
position: relative;
}
figure#imagestrip img { position: absolute; top: 0; left: 0; }
The HTML also changes; note that I’ve placed the images in reverse order in the new code (Listing 6-13).
Positioned absolutely, the last image in the figure will be on top. (Alternatively, you could place an inline z-index
property on each).
Listing 6-13. HTML Code for Third Option Crossfade Image Slider
As each image in the keyframe sequence is “solid” for a quarter of the length of the animation, and the
animation as a whole is ten seconds long, each subsequent call to the keyframe is delayed by an additional one-
fourth of the total time. The extra time given to the first pass (the animation of the black kite) is provided so that
the return of the photograph does not “step on” the fade into its substitute at the start of the figure.
Adding Captions
You can add captions to the slideshow in much the same way you did in the earlier examples with image
transitions. The markup becomes that shown in Listing 6-14.
Listing 6-14. HTML Code for an Image Slider with Captions