Chapter 6 ■ CSS3 Keyframe animationS for Web Content
The philosophy behind the timing is simple: with a total animation length of 30 seconds, each image in the
slide will appear fully on-screen for 6 seconds (20% of the animation time), and move to the left in 1.5 seconds
(5% of the total time). By looping a second animation that fades out the imagestrip element near the end over
7.5 seconds, you can merge the two to get a smooth result.
CrossFade
To achieve a crossfade effect you have three options, but in all cases the images are no longer placed as a “strip”,
but stacked one on top of the other, with the topmost image faded out in turn.
The first and easiest option is to simply set each background image as a keyframe for an otherwise empty
(but correctly sized) element (see Listing 6-10).
Listing 6-10. CSS code for a crossfade image slider
@keyframes imageswap {
0% { background-image: url(black-kite.jpg); }
20% { background-image: url(red-kite.jpg); }
40% { background-image: url(pelicans.jpg); }
80% { background-image: url(pariah-kite.jpg); }
100% { background-image: url(black-kite.jpg); }
}
This will simply and easily crossfade between the images; however, it may not give you the results or degree
of control you are after. An alternative approach is to bring the images onto the page by using the crossfade filter,
as shown in Listing 6-11.
Listing 6-11. Alternative CSS Code for a Crossfade Image Slider
@keyframes slider {
0% { background-image: url(black-kite.jpg); }
20% { background-image: cross-fade(url(black-kite.jpg), url(red-kite.jpg),0%); }
25% { background-image: cross-fade(url(black-kite.jpg), url(red-kite.jpg),100%); }
45% { background-image: cross-fade(url(red-kite.jpg), url(pelicans.jpg),0%); }
50% { background-image: cross-fade(url(red-kite.jpg), url(pelicans.jpg),100%); }
70% { background-image: cross-fade(url(pelicans.jpg), url(pariah-kite.jpg),0%); }
75% { background-image: cross-fade(url(pelicans.jpg), url(pariah-kite.jpg),100%); }
95% { background-image: cross-fade(url(pariah-kite.jpg), url(black-kite.jpg),0%); }
100% { background-image: cross-fade(url(pariah-kite.jpg), url(black-kite.jpg),100%); }
}
The third option, using “real” images, is slightly more complex: the topmost image must be faded out, then
delayed before returning to the foreground. (Think of a deck of cards, with the transition taking place between
the card on top and the one underneath before the first card is placed in a discard pile for a period of time.) The
CSS becomes what’s shown in Listing 6-12.
Listing 6-12. Third Option CSS Code for a Crossfade Image Slider
@keyframes slider {
0%, 25% { opacity: 1; }
30%, 100% { opacity: 0; }
}