CSS中的Translate和Top有什么区别

Question

CSS中translate和top之间的区别是什么？

示例：

之间有什么区别

这：http://jsfiddle.net/QS4Ha/

并且：http://jsfiddle.net/GWYPb/

哪个更好用？

Answer 1

查看此html5 Rocks article，强烈建议您使用翻译制作动画。

为什么呢？更改＆＃39; top＆＃39;属性触发布局，翻译没有。

  

您应始终注意避免动画将触发的属性   布局或涂料，这两种都很昂贵，可能导致跳过   帧。声明性动画比命令性更强   浏览器有机会提前优化。

另见this post：

  

顶部/左侧有非常大的时间来绘制每个帧，这导致了   一个斩波过渡。包括一些大盒子阴影在内的所有CSS都是   在CPU上计算并与该渐变背景合成   每一帧。另一方面，翻译版本获得笔记本电脑   元素升级到它在GPU上的自己的层（称为   RenderLayer）。现在，它位于自己的图层，任何2D变换，3D   变换或不透明度的变化可以纯粹发生在GPU上   保持非常快速，仍然可以快速获得帧速率。