Apple’s iPhone 4S CSS3 animation explained

If you go to the iPhone4S product page on the Apple site, you’ll see some sweet CSS3 animations at work. John B. Hall took the birds’ eye view and analyzed what happens.

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.

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

Mac ‘n’ Cheese

Mac ‘n’ Cheese is an animated short directed and created by four students at the Utrecht School of Arts in the Netherlands. This roughly two minute animation took about five months to make, and about a bajillion peanut butter sandwiches.

The authors also note it’s “inspired by Team Fortress 2 and Meet Buck”, the latter being an other great animation!