An explanation of the CSS animation on Apple's iPhone 4S webpage

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.

This demo only works in recent versions of safari, chrome, firefox, and opera. In the real version, the caption for each slide animates separately and the site degrades well in older browsers.

css border transitions

Choose an easing type and test it out with a few effects.
If you don’t quite like the easing, grab a handle and fix it.
When you’re happy, snag your code and off you go.
Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!