CSS3 过渡性能的注意事项答案

【问题标题】：Considerations for CSS3 Transition PerformanceCSS3 过渡性能的注意事项
【发布时间】：2011-12-16 01:08:42
【问题描述】：

作为需要支持移动设备的项目的一部分，我一直致力于使用 CSS3 模仿 iPhone 切换控件。我在那里几乎拥有元素的外观和感觉，并且正在使用 CSS3 过渡来动画其状态变化。

当我将元素本身放在页面上时，iOS 上的过渡相对平滑。但是，当我将它与页面上的其他 CSS 元素结合使用时，iOS 中的结果就像任何东西一样滞后。它比原始的 jQuery 动画稍微好一点，但并不多。

我设置了两个测试页面来演示我的意思（在普通浏览器中几乎看不到差异）：

自行切换控制 > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

结合其他元素>http://ben-major.co.uk/labs/iPhone%20UI/

我正在寻找有关加快移动设备过渡的任何建议。哪些因素会降低其在整页测试中的性能？

欢迎任何建议和cmets。

【问题讨论】：

只有第一个示例在 IOS 模拟器上工作。

标签： css css-transitions

【解决方案1】：

你必须小心这个，因为它可以改变它所应用的元素的 z-index，但是添加：

-webkit-transform-style: preserve-3d;

对于要应用过渡的元素，可以显着加快动画速度，因为它会强制硬件对动画使用硬件加速。

如果您确实遇到布局错误，您可以将 2d 转换切换为 3d 值，因此：

-webkit-transform: translate(100px, 100px)

变成：

-webkit-transform: translate3d(100px, 100px, 0px)

您可以在http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/# 上查看有关这有助于加快速度的演示

如果在将其应用于元素后，您看到它或它周围的元素在使用时闪烁，则使用：

-webkit-backface-visibility: hidden;

到元素，这应该可以解决问题。

这些技巧帮助我制作了快速、高效的 CSS 过渡效果，希望对我有所帮助。 :)

【讨论】：

感谢您的提示，戴夫。强制 3D 变换有轻微的改进，但恐怕没什么太大的改善。我已将文件上传到原始帖子中的链接。关于如何加快速度的更多想法？它仍然太慢了，我不喜欢。
-webkit-transform-style: preserve-3d; 给我的 css3 过渡带来了巨大的性能提升
我知道你是在 2011 年写的，但不包括标准化属性有点懒惰。 :) 现在几乎所有浏览器都支持标准属性，不需要前缀。 caniuse.com/#feat=transforms3d

【解决方案2】：

Chrome 最近改进了 2D 过渡性能，现在不再需要这个技巧。最好的是，如果删除 translate3d，您将不再有那些 z-index 问题！用测试来证明。 http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

【讨论】：

仍然在 Safari 中有所作为，但不必再次使用这个技巧会很好。

【解决方案3】：

我认为它已经很老了，但是对于仍然需要技巧来提高移动设备上的过渡性能的任何人，您都可以申请： -webkit-transform: translateZ(0); 到您正在制作动画的元素。这个技巧是根据这个博客：http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/。我试过了，效果很好。

【讨论】：

【解决方案4】：

您也可以尝试will-change: transform;，在此处阅读更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility

【讨论】：