【发布时间】：2012-03-28 13:06:15
【问题描述】：
我知道您可以强制 GPU 加速以通过对“transform”属性应用过渡来实现屏幕上元素的平滑动画，例如：
elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';
但我想知道如果您将第二行替换为：
elem.style.left = '600px';
GPU 加速是否会/可以为“left”（或“top”）属性启动，还是必须在 transform 属性上？在我看来，它应该是 GPU 加速的，但我无法从我读过的任何文档中收集到最终答案。
【问题讨论】：
-
为了让您的问题有机会得到回答，您必须将其缩小到具有特定图形子系统的特定操作系统上特定浏览器的特定版本。所有这些事情都会影响答案，因为这不是规范中详细说明的内容——这取决于特定操作系统/硬件上特定浏览器的实现者。有证据表明，某些浏览器在某些情况下使用 GPU 来加速某些 CSS 指令而不是其他指令，但即使这样也只能在上述术语中讨论。
-
好吧，我不太确定...我不是在寻找特定操作系统/GPU/浏览器/等的答案，我正在寻找一个通用的答案许多不同的操作系统/GPU/浏览器/等可能正在访问我的网站。如果答案最终是“这取决于 - 所有操作系统/浏览器/等都以不同方式处理这个问题，所以不要依赖它”，那么这将是一个令人满意的答案。无论哪种方式，似乎有人已经从不同的角度做出了回应。
-
在某些类型的硬件上运行时，您检查的答案回答了您对一个或可能两个浏览器的某些版本的问题。也许这就是您要寻找的东西，但是您的问题比那个问题要笼统得多，这就是为什么我说必须在特定硬件上的特定实现的上下文中回答它的原因。绝对没有说用 javascript 设置 left 属性并触发 CSS 转换不能或不会使用硬件加速 - 因此问题是任何浏览器在任何情况下目前是否都可以。
-
只是为了向您展示这会变得多么复杂，在 Mac 上运行相同的浏览器内核 (Safari)，iPhone 2、iPhone 3s 和 iPod Touch 都可以提供不同级别的硬件加速不同的 CSS3 过渡。即使在同一个浏览器系列中，它也是非常特定于实现的，从一个浏览器到另一个浏览器，从一个浏览器版本到另一个浏览器版本更是如此。
标签： css webkit css-transitions