CSS3 - 逐步在屏幕上翻译元素?

时间:2012-01-15 11:48:50

标签: javascript html5 css3 webkit css-animations

我需要以50px的步长在屏幕上翻译元素。每次点击,元素向右移动50px,比如说。

如何更正以下代码?

http://jsfiddle.net/vujMV/13/

这里每次跳50px,然后翻译50px,每次点击总共100px。我需要硬件加速运动(因为它要部署在移动平台上),因此我需要使用translate()。

1 个答案:

答案 0 :(得分:0)

请注释掉最后两行。这些是导致最初50px跳跃的原因:

//left += 50;
//move.style.left = left+"px";

修改
要在每次单击它时使其工作,您需要相对于当前属性更改translate3d属性,而不是.offset属性,因为一旦您注释掉上面的行,它就不再更改。

以下是一个有效的例子:http://jsfiddle.net/vujMV/16/