Chapter 6 ■ CSS3 Keyframe animationS for Web Content
95% { background-position-x: -1500px, -1000px, -500px, 0px, 500px, 1000px; }
100% { background-position-x: -2000px, -1500px, -1000px, -500px, 0px, 500px; }
}
You could also create a single container element with multiple background images and move it through
a visible “window”, or make a single image for the background that joins all of the images together. The latter
approach will make the CSS easier, but will also make it substantially more difficult to change the gallery later.
Pausing the Slideshow
It’s reasonable to allow the user to pause the slider to focus on one image. The easiest way to initiate such an
action is a hover on the slider itself; at the same time, you should place a visual identifier on the slideshow to
clearly indicate that it is in a paused state. For this example, I’ll do so by fading the imagestrip element and
placing a text substitute for a pause icon on the screen as a pseudo-element (I could also use an image file). All of
the changes are additions to the CSS, as shown in Listing 6-7.
Listing 6-7. CSS Code to Pause an Image Gallery Slideshow on hover
div#slideshow:hover figure#imagestrip { animation-play-state:paused; opacity: 0.5; }
div#slideshow:hover:before {
content: "❚❚"; font-size: 200px;
color: rgba(255,255,255, 0.7);
position: absolute;
left: 160px; top: 80px;
}
Note that you could ease in the visual identifiers of the paused state by placing an appropriate transition on
the inner figure element, such as transition: 1s opacity linear.
Altering the Transition Between Images
Ultimately there are many possible kinds of fades and wipes between each image in your slider gallery, a few of
which are shown next.
Fade-In-Out
After a simple horizontal or vertical crawl, the most common transition for a slider is to have each image fade to/
from black in sequence. Without altering the markup, you could fade the image strip out, move the image strip
“under cover of darkness” while it is black and then fade the strip in as a whole again, as shown in Listing 6-8.
Listing 6-8. CSS Code to Pause an Image Gallery Slideshow on hover
@keyframes slider {
0% { transform: translateX(0); }
20% { opacity: 1; }
22% { opacity: 0; transform: translateX(0); }