适当的方法来优化CSS 3动画iOS/Mobile Safari？

我正在使用PhoneGap构建一个iPad应用程序。我试图使用CSS转换的动画，但我不完全确定我使用正确的方法来利用设备可能支持的任何硬件加速。

这是一个模态窗口(DIV)，我想从页面的顶部向下滑动。它将开始位于屏幕顶部，然后通过jquery添加一个类来动画到页面本身：

.modal {
      background: url('../images/bgnd-modal.png');
      width: 800px;
      height: 568px;
      position: absolute; 
      top: -618px;
      left: 100px;
      z-index: 1001;
      -webkit-transition: top .25s ease-in; 
  }
.modal.modalOn {
      top: 80px;
  }

当部署到iPad 2与iOS 4，这样做，但动画是轻微的干。这不是一个完全平滑的动画。我应该使用不同的CSS来处理这个？或者这可能只是一个副作用它是一个PhoneGap应用程序和有问题的DIV有一个大的背景图像？

解决方法

你应该至少添加一个空的translate3d声明：

transform: translate3d(0,0);
-webkit-transform: translate3d(0,0);

这将有助于在iOS上巨大的性能，如Remy Sharp所示，因为它导致iOS使用硬件加速。

如果你想进一步，重构动画使用webkit翻译转换，而不是动画的“顶”属性。在transform3d属性中，第二个参数是Y值。在您的示例中，将-webkit过渡更改为专注于transform属性，而不是顶部。然后，设置translate3d(0,0)的初始webkit变换。

要执行动画，请将.modal.modalOn声明更改为：

transform: translate3d(0,80px,0)

这将导致iOS动画的元素的变换，应该比第一个方法更平滑。

– 注意 – 不要忘记添加像px或em一样的测量单位 – 像transform：translate3d(0,80,0);不会工作。