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 now-defunct real version, the caption for each slide animates separately and the site degrades well in older browsers.
by @johnbhall
Software Engineer at Custom Ink