Chapter 3 ■ CSS3 tranSitionS for imageS

When the page loads, you want several pictures to slide from one side of the page to the other. For this
example, I’ll use photographs by Chee Hong (www.flickr.com/photos/chleong/6867222762/), Andreas Beeker
(www.flickr.com/photos/kiwiwings/2148854337/sizes/l/in/photostream/), Gordon Wrigley
(www.flickr.com/photos/tolomea/4498923741/sizes/l/in/photostream/), and David Pursehouse
(www.flickr.com/photos/mdid/2235443912/sizes/l/in/photostream/).
First, you’ll set up your basic page, the markup for which will remain unchanged throughout this exercise
(see Listing 3-41). Note that the images are offset off the left side of the page by their width (1300 pixels) plus an
incremental amount, staggering them horizontally).

Listing 3-41. HTML and CSS Code for a Background Transition on Page Load

body { font-family: Futura; margin: 0; line-height: 200%;
background:

Figure 3-11. Transitioned background images