CSS3 Animation Explained: Apple’s iPhone 4S Feature Page

iPhone 4S debuted yesterday and with it a snazzy new “features” page. This is especially important to me because Apple used CSS3 animation to breath some life into it.

I’ll explain from a high-level overview so you can get an idea of whats going on.

HERE’S THE SETUP

We start with a large div (3200 X 3900) named “#phone-stage” set to position:absolute.

Since overflow:hidden will hide any portion of a child element that passes it containment boundaries. This effectively masks the #phone-stage div to the dimensions of the #clip div.

On #phone-stage there are six feature-modules. One for each of the new iPhone 4S features:

intro

Siri

A5 Chip

Camera

iOS 5

iCloud

The elements for each feature-module consist of mainly a logo and a few screenshot images.

There are also featured-text snippets associated with each feature-module. But the featured-text snippets are not children of #phone-stage. The snippets are placed into their own divs, independent of the main #phone-stage div (more later).

BODY MOVIN’, BODY MOVIN’

Now #phone-stage is loaded up with the 6 feature-modules. Each module has its opacity set to 0 and is positioned at different locations and rotations within #phone-stage. After 3-5 seconds (or upon key press or click event) the #phone-stage div will rotate and zoom to the next position.

As #phone-stage rotates and zooms into position, the child elements within each featured-module fade in and animate independently.

The featured-text snippets that reside in their own div animate into the featured-module with their own timing, and fading animation, unaffected by the zooming and rotation of phone-stage. This creates a very sophisticated, multi-layered effect with minimal animation layers.

RETREAT! MOVE! FALL BACK!

For browsers without CSS enabled animation they see the Featured/Hero slider. This script detects the browser ability to display CSS3/HTML5 animation. If the browser cannot display animation it will fallback to the typical feature-slider by hiding the animation code and displaying the fall back code.