Apple.com product animation

http://www.apple.com/mac/ (the products animating into position)

Anyone know how apple does this?

I don't need useable code. Just an idea of how to accomplish it.

I use the jQuery framework.

EDIT: Thanks to Jordan for pointing this out. Apple开发者_如何学Go is using css3 animations for this, not javascript.

If anyone has a good idea on doing this with JS please post.

Apple is using CSS3 animations for this. Check out the CSS file and scroll down to /* animations.

Here I made a version in jQuery, which works in all browsers. Using this technique, you have many ways to do it using different CSS approaches, like absolute divs inside a relative one, etc. and then changing that values with the jQuery's animate function. I made it as simple as possible.

http://jsfiddle.net/sanbor/SggMG/

HTML

<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Run animation again</a>

CSS

.box {
    background: red;
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
    margin-left: 100%;
}
.clearFloat {
    clear: both;
}

JS

function animateBoxes() {
    $('.box').each(function(index, element) {
        $(element).animate({
            'marginLeft': '10px'
        }, {
            duration: 500,
            specialEasing: {
                marginLeft: 'easeOutBounce'
            }
        }, function() {
            // Animation complete.
        });
    });
}

$('#resetAnimation').click(function() {
    $('.box').css('marginLeft', '100%');
    animateBoxes();
});

animateBoxes();

Alternate way, with css3 (http://jsfiddle.net/sanbor/SggMG/6/) This also can be done with css3 transitions, which is more, because just add an smooth effect between property changes, but animation allows to apply certain HTML

<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Click twice</a>

CSS

.clearFloat {
    clear: both;
}

.box {
    background: red;
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
}

.box.moveit{
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 1s;
    -moz-animation-name: moveit;
    -moz-animation-duration: 1s;
    -ms-animation-name: moveit;
    -ms-animation-duration: 1s;
    animation-name: moveit;
    animation-duration: 1s;
}

@-webkit-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@-moz-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@-ms-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

JS

$('#resetAnimation').click(function() {
    $('.box').toggleClass('moveit');
});