9

在 CSS3 中，动画是在各种供应商前缀下引入的，带有过渡属性。现在，至少在纯 CSS 中，有两种方法可以让元素改变位置。

  1. 将元素的位置设置为绝对位置并使用left: right: top:andbottom:
  2. 使用-vendor-transform:translate(X,Y,Z)

现在，严格来说transform:translate()，除了一个人的使用能力之外translateZ()，它们之间的唯一区别是后者不是报告值；除了解析属性本身之外，翻译不是计算样式。但是，如果这不是必需的，那么对于配置中的动画和定位元素来说，后者实际上是更好的选择position:fixed吗？

我对制作一个需要在移动设备和浏览器上运行的非常重的 web 应用程序特别感兴趣，因此向后兼容性并不是什么大问题。如今，移动浏览器往往至少是“现代的”。

所以最终，我的问题是，根据 CSS3 规范的制定者，究竟是为了什么？transform:translate()它是在哪里构建的以用于 LRTB 变换，并且在使用硬件加速-webkit-transform: translateZ(0);( 对于那些不知道的人，有时在 webkit 中的元素会在硬件加速环境中闪烁。

无论如何，我只是在为我的 web 应用程序寻找最好和最新的布局解决方案，它们可以最有效地利用 CPU 和 GPU，以便它们可以以非常优化的 FPS 运行（就过渡而言，在某些情况下，涉及滚动）最理想的平滑类型的一个很好的例子是http://www.webkit.org/blog-files/leaves/（是的，我确实阅读了它的源代码。）

有输入吗？

4

3 回答 3

5

我知道这是一篇较旧的帖子，但是当我想知道同样的问题时，我发现这篇文章非常有帮助：

http://css-tricks.com/tale-of-animation-performance/

于 2012-12-26T15:06:14.023 回答
2

根据 CSS3 规范的制定者，translate:translate() 到底是什么？

它说：

为了向后兼容现有的 SVG 内容，本规范支持 [ SVG11 ] 中的 'transform' 属性定义的所有转换函数。

至于您问题的其他部分，不确定是否可以给出一般性答案。

我认为最好针对您的特定情况进行一些性能测试。如果您的应用程序设计良好，那应该不难做到。此外，这样的设计可以允许对每个设备进行优化，其中分别使用平移和偏移。

于 2012-06-20T03:06:49.783 回答
1

不知道为什么这还没有得到回答，但该translate属性不会导致 CLS（内容布局移位）。换句话说，当页面加载或视口发生变化时，使用 CLS 的内容会有些静态。如今，一个 web 应用程序将因谷歌灯塔的性能而受到惩罚。

于 2021-02-15T09:23:59.383 回答