用时间轴直观地创建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
• Site Catalyst

Answer 3

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

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