Amazing animated history of the iPhone in pure CSS

By now, most Apple fans have their hands on an iPhone 6, and they do look pretty incredible — even if Apple have accidentally introduced curved screens.

The iPhone is a wonderful example of iterative design; each model is an evolution rather than a revolution, and they all build on the previous design. Looking at the original iPhone, it doesn’t look much like the iPhone 6, but look at one model after the other and you can almost follow the design process as one refinement follows another.

That history makes the iPhone a cool subject for vector transitions, and what better way to achieve that than with CSS? Enter this incredible pure CSS — no images were used at all — interactive animation of the history of the iPhone. Just scroll through the models one by one and watch the beautiful animation.

The whole project was built by Stephen Griffin on behalf of Protect Your Bubble, who clearly loves his chosen medium:

Over the years CSS has evolved to include more and more capabilities which now include the ability to apply rounded corners, create colour gradients, and in modern browsers such as Chrome and Firefox, the ability to rotate, scale and even add blurs and other filter effects.
The iPhone timeline piece makes use of these CSS features to create illustrations made purely of code. No images were used to recreate each iPhone, just empty HTML elements that have been styled purely with CSS.

Paddi MacDonnell

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter.