为 iOS/Mobile Safari 优化 CSS 3 动画的正确方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6481894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proper way to optimize CSS 3 animations for iOS/Mobile Safari?
提问by DA.
I'm building an iPad app using PhoneGap. I'm trying to use CSS transformations for the animation, but I'm not entirely sure I'm using the proper methods to leverage any hardware acceleration the device might support.
我正在使用 PhoneGap 构建 iPad 应用程序。我正在尝试对动画使用 CSS 转换，但我不完全确定我使用了正确的方法来利用设备可能支持的任何硬件加速。
It's a modal window (DIV) that I want to slide down from the top of the page. It'd start positioned off the top of the screen, then animated into the page itself via adding a class via jquery:
这是一个模态窗口 (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;
}
When deployed onto the iPad 2 with iOS 4, this works, but the animation is slightly jerky. It's not an entirely smooth animation. Should I be using different CSS to handle this? Or is this perhaps just a side-effect of it being a PhoneGap app and the DIV in question having a large background image?
当部署到带有 iOS 4 的 iPad 2 时，这有效，但动画有点生涩。这不是一个完全流畅的动画。我应该使用不同的 CSS 来处理这个问题吗？或者这可能只是PhoneGap应用程序和具有大背景图像的DIV的副作用？
回答by Benjamin Mayo
You should at minimum add an empty translate3d declaration:
您至少应该添加一个空的 translate3d 声明：
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
This will help performance immensely on iOS, as demonstrated by Remy Sharp, because it causes iOS to use hardware-acceleration.
正如Remy Sharp所证明的那样，这将极大地帮助 iOS 上的性能，因为它会导致 iOS 使用硬件加速。
If you want to go further, refactor the animation to use a webkit translation transform, rather than animating the 'top' property. In the transform3d property, the second parameter is the Y value. In your example, change the -webkit-transitionto focus on the transform property, rather than top. Then, set an initial webkit-transformof translate3d(0,0,0).
如果你想更进一步，重构动画以使用 webkit 转换变换，而不是动画 'top' 属性。在transform3d 属性中，第二个参数是Y 值。在您的示例中，将 更改-webkit-transition为专注于变换属性，而不是顶部。然后，设置首字母webkit-transform为translate3d(0,0,0)。
To perform your animation, change your class .modal.modalOndeclaration to:
要执行动画，请将类.modal.modalOn声明更改为：
transform: translate3d(0,80px,0);
-webkit-transform: translate3d(0,80px,0)
This will cause iOS to animate the transform of the element, and should be even smoother, than the first method.
这将导致 iOS 对元素的变换进行动画处理，并且应该比第一种方法更平滑。
-- Note --
Don't forget to add a unit of measurement like px or em — something like transform: translate3d(0,80,0);won't work.
-- 注意 -- 不要忘记添加一个度量单位，例如 px 或 em - 类似的东西是transform: translate3d(0,80,0);行不通的。
回答by Alon
try adding :
尝试添加：
webkit-backface-visibility: hidden;
