html - 什么是 CSS 转换 :translate() property ultimately for?

Question

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

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

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

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

所以最终，我的问题是，根据 CSS3 规范的制定者的说法，transform:translate() 到底是做什么用的？它是用来做什么的？ LRTB 变换，是否可以在硬件加速时以渲染速度、动画平滑度和视觉稳定性方面明显优于它的方式使用它 (-webkit-transform: translateZ(0); ) 被雇用了吗？对于那些不知道的人，有时 webkit 中的元素会在硬件加速环境中闪烁。

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

有什么意见吗？

Answer 1

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

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