CSS3表现如何？动画左或translateX

Question

在我正在制作的HTML5 / CSS3演示中，我主要使用CSS过渡来加速演奏。

我想知道我的UI - 例如，当前JQuery根据鼠标位置操纵容器Div的LEFT属性，我应该改为使用transform: translateX(tx)吗？或者，如果浏览器支持，JQuery会自动执行此操作吗？

Answer 1

jquery不使用transform：translateX（tx）。 你必须手工制作。但这是一个很好的做法，因为它实际上要快得多。

http://jsfiddle.net/MZBtr/2/

您可以使用Mondernizr进行特征检测，然后根据结果决定要做什么。

这是一个演示它的演示： http://jsfiddle.net/zWavD/1/

Answer 2

Ben Barnett有一个 jquery扩展，它增强了jquery使用CSS3为某些属性设置动画（左边是其中之一）。

http://www.benbarnett.net/2010/09/01/enhancing-jquerys-animate-function-to-automatically-use-css3-transitions/

Answer 3

JQuery动画为您提供的属性设置动画，它不会尝试再次猜测属性列表（据我所知）

使用翻译而不是JQuery动画的唯一原因是，如果您关心iPad和iPhone上的最佳性能。这些设备上的CSS转换是GPU卸载的（只要你使用translate3d，而不是translate2d），它们很快就会出现在Android等其他移动设备上，以及Chrome和Safari等桌面浏览器。