jsFiddle

• Run again
• Edit this fiddle

• Result
• CSS
• JavaScript
• HTML

            div#blue {
                float: right;
                position: relative;
                left: 1500px;
                z-index: 10;
                opacity: 0;
                -webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) 600ms;
            }
            
            div#red {
                float: right;
                position: relative;
                z-index: 100;
                left: 1000px;
                margin-top: -643px;
                -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000) 200ms;
            }

            div#text {
                float: right;
                position: relative;
                z-index: 1;
                opacity: 0;
                margin-top: -500px;
                -webkit-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) 600ms;
    
            }

            
            .go {
                margin-right: 110%;
                opacity: 1 !important;
 
            }
            
            .go2 {
                margin-right: 71.5%;
                opacity: 1 !important;
 
            }

            .fly {
                margin-right: 70%;
                opacity: 1 !important;
            }
            
            .end {
                margin-right: 2500px;
                -webkit-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) 2500ms;
            }
            
            div#container {
                clear: both;
                overflow: hidden;
                width: 1300px;
                height: 629px;
                padding-bottom: 20px;
                border: 1px solid black;
                border-radius: 5px;
                
            }

            $(document).ready(function() {
                $("#red").addClass("go2");
                $("#blue").addClass("go");
                $("#text").addClass("fly");
            });

<div id="container">
            <div id="blue">
                <img src="http://images.apple.com/imac/images/overview_new2_20110426.png" alt="overview_new2_20110426" width="830" height="639" />
            </div>
            <div id="red">
                <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" alt="overview_new1_20110426" width="693" height="639" />
            </div>
            <div id="text">
                <p><img src="http://images.apple.com/imac/images/overview_new_title20110426.png" /></p>
                <p><img src="http://images.apple.com/imac/images/overview_new_subhead20110426.png" /></p>
            </div>
            <div style="clear: both;"></div>
            <!-- <button id="back">Back</button> -->            
        </div>