Chapter 6 ■ CSS3 Keyframe animationS for Web Content23% { opacity: 0; transform: translateX(−500px); }
25%, 45% { opacity: 1; }
47% { opacity: 0; transform: translateX(−500px); }
48% { opacity: 0; transform: translateX(−1000px); }
50%, 70% { opacity: 1; }
72% { opacity: 0; transform: translateX(−1000px); }
73% { opacity: 0; transform: translateX(−1500px); }
75%, 95% { opacity: 1; }
97% { opacity: 0; transform: translateX(−1500px); }
98% { opacity: 0; transform: translateX(−2000px); }
100% { opacity: 1; transform: translateX(−2000px); }
}
Note that I’m grouping keyframes that have the same properties in the same way you would group ordinary
CSS selectors. Typically, however, you’ll want to make the call on the animation longer to prevent it from
appearing rushed. I’d suggest using animation: slider 20s infinite.
Because the other images in the strip are not visible during the fade sequences, you can drop the final
duplicate image on the end of the slider div, running it back to the beginning in complete darkness before
starting the animation again. That will not be possible in the next example.
Fade-In-Out During Motion
You can retain the impression of a slider effect with a fade by fading the images out during their movement from
left to right. While it’s entirely possible to do this in a single keyframe animation, it’s probably easiest to create the
code as two sequences running simultaneously.
To achieve this, you revert to your original slider keyframe sequence, now running over 30 seconds, and add
in a new fader keyframe declaration (see Listing 6-9).
Listing 6-9. CSS Code to Pause an Image Gallery Slideshow on hover
@keyframes slider {
0% { transform: translateX(0px); }
20% { transform: translateX(0px); }
25% { transform: translateX(−500px); }
45% { transform: translateX(−500px); }
50% { transform: translateX(−1000px); }
70% { transform: translateX(−1000px); }
75% { transform: translateX(−1500px); }
95% { transform: translateX(−1500px); }
100% { transform: translateX(−2000px); }
}
@keyframes fader {
0% { opacity: 1; }
70% { opacity: 1; }
90% { opacity: 0; ease-out; }
95% { opacity: 0; }
100% { opacity: 1; ease-in; }
}
figure#imagestrip { width: 2500px;
animation: slider 30s infinite, fader 7.5s infinite; }