Chapter 6 ■ CSS3 Keyframe animationS for Web Content
Listing 6-24. HTML for a Lightbox Equivalent in CSS3
You need the dd to be the full height and width of the page and to center its content. To do that, you’ll place
CSS on the HTML element itself, so that the dd can measure itself relative to that, and use the flexbox module to
center the child elements of the dd (Listing 6-25).
Listing 6-25. Base CSS for a Lightbox equivalent in CSS3
html { min-height: 100%; position: relative; }
body { margin: 0; height: 100%; margin-right: 2em; }
dl#gallery { float: left; }
dl#gallery dt { width: 150px; }
dl#gallery dd {
margin-left: 0; background: rgba(0,0,0,0);
position: absolute; top: 0; bottom: 0;
width: 100%; height: 100%;
display: box; box-pack:center; box-align:center;
visibility: hidden;
}
dd a { background: #fff; display: block; transition: 4s all ease-in; }
Note that there is a potential disadvantage to this approach if the page extends significantly past the bottom of the
browser window, as this CSS will cause the image to always vertically center itself against the height of the body content.
To expand and show the dd element, you’ll animate the image with a keyframe sequence and fade the page
by transitioning the background of the dd (Listing 6-26).
Listing 6-26. Keyframe Sequence for a Lightbox Effect
@keyframes blowup {
0% { width: 0; height: 0; opacity: 0; }
30% { width: 640px; height: 0; opacity: 0; }
60% { width: 640px; height: 480px; opacity: 0; margin: 20px; }
100% { width: 640px; height: 480px; opacity: 1; margin: 20px; }
}
dd:target {
visibility: visible; background: rgba(0,0,0,0.6);
transition: 2s background linear;
}
dd:target a { box-shadow: 0 0 8px 8px rgba(0,0,0,0.3); }
dd:target a img { animation: blowup 3s forwards; }
By linking the content of the dd to the id for the body, a click on the image will retarget the browser and undo
the animation.