视觉创建时间轴的css3动画？

Question

什么技术可以用来创建这个奇妙的动画：

http://www.apple.com/iphone/

它是jQuery的一些CSS3？

在OSX上有工具可视化创建这样的动画，然后将其导出到Jquery和CSS？

Answer 1

这是它如何制备：http://johnbhall.com/iphone-4s/

“电话阶段”（蓝边框）包含动画序列的全部6“幻灯片”，并且具有与持续时间和定时的过渡的CSS属性函数（一个三次贝塞尔曲线）。为了让电话舞台从一个幻灯片循环到下一个幻灯片，它的CSS变换属性会使用新的翻译和旋转值进行更新。在周期结束时，电话舞台的过渡时间暂时设置为0ms，而幻灯片6重置为幻灯片1.

Answer 2

我发现Chrome扩展程序BuildWith和Chrome Sniffer。

• HTML5
• script.aculo.us 1.8.0
• 原型1.7
• 中心催化剂

Answer 3

从外观上来看也只是一些CSS transforms（依赖于浏​​览器syntax）和标准positioning与JS计时。也有一些淡化，但现在很容易做到。阴影只是图像，没有花哨的CSS。

至于使用jQuery，他们不使用它，而是使用scriptaculous原型。当然，你可以用jQuery来做到这一点，或者其他任何成熟的框架。