Skip to main content

Apple's iPhone 4S CSS animation shows extra design detail

Apple's iPhone 4S CSS animation shows extra design detail

Share this story

iPhone 4S CSS
iPhone 4S CSS

Apple's new iPhone 4S came with a new page design, which features a particularly neat CSS animation trick — it's all one slide. Unlike pages for the Macbook Air and iPad, which use a simple left-to-right scroll of slides, the iPhone 4S page is made up of a rotating box containing all six slides which allow for fluid transitions and perpetually repeating slides.

We know this because software engineer John B. Hall took the time to put together a fascinating animation on his website showing a "zoomed out" view of how each animations moves in and out of your web browser. John's made the full animation available on his website for those who want to see it in action.