Pro CSS3 Animation

Chapter 3 ■ CSS3 tranSitionS for imageS

The last issue, not so serious, is that the background images fade suddenly when they move behind the div.
There are two obvious solutions to this problem:

•    Blur the left and right edges of the div by using a double box-shadow in the same color as

the background of the div and a high amount of blur, as shown in Listing 3-43.

Listing 3-43. CSS Code to Blur the Transition of Background Images

div#wrapper { width: 600px; margin: 5em auto;

padding: 3em;

background: rgba(255, 255, 255, 0.8);

box-shadow: 100px 0 100px rgba(255, 255, 255, 0.8),

-100px 0 100px rgba(255, 255, 255, 0.8);

}

•    Expand the div to cover the entire body so that everything behind it will be faded out. Set

the opening declaration as shown in Listing 3-44.

Listing 3-44. CSS Code to Enforce Opacity of Background Images Across a Page

html, body { min-height: 100%; margin: 0; }

html, body { height: 100%; margin: 0; }

div#wrapper { width: 100%; min-height: 100 %;

padding: 3em;

box-sizing: border-box; background: rgba(255, 255, 255, 0.8);

}

Creating and Animating Fake Background Images

If you desire a greater degree of control over background images, you have to fake them by exploiting the
position and z-index CSS properties to force images into the background. There are two primary methods for
doing so. The first of these is to create real images and force them into the background.
Rather than drawing the background images via CSS, this technique places them as images in the code,
above, below, or even inside the div (Listing 3-45).

Listing 3-45. HTML and CSS Code to Create Fake Background Images for a Page

#benmore, #tekapo, #lindis { position: absolute; z-index: -1; }
#benmore { top: 300px; left: 200px; }
#tekapo { top: 600px; left: 800px; }
#benmore, #tekapo, #lindis {
position: absolute; z-index: -1; opacity: 0; transition: 4s linear all 2 s; }
#lindis { top: 900px; left: 50px; }

As separate images, these elements can be animated individually, across all properties. Providing the
elements with a negative z-index pushes them into the deep background. They are animated in Listing 3-46 in
much the same way as they were in the earlier exercise.