Question

What techniques could be used to create this wonderful animation:

http://www.apple.com/iphone/

Is it Jquery with some CSS3?

Are there tools on OSX to visually create such an animation and then export it to Jquery and CSS?

Answer 1

This is how it was made: http://johnbhall.com/iphone-4s/

The “phone stage” (blue-bordered box) contains all 6 “slides” of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage’s transition duration is temporarily set to 0ms while slide 6 resets to slide 1.