CSS3 - Translating an element across the screen in steps?

Question

I need to translate an element across the screen in steps of say 50px. Upon every click, the element moves 50px to the right, lets say.

How do i correct the following code?

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

Here it jumps 50px each time and then translates 50px, a total of 100px per click. I need the movement to be hardware accelerated (since it is to be deployed on a mobile platform) and hence I would need to use translate().

Answer 1

Just comment out the final two lines. Those are what cause the initial 50px jump:

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

Edit
To make it work each time you click it, you need to change the translate3d property relative to the current one, rather than the .offset property since that is no longer changing once you comment out the above lines.

Here's a working example: http://jsfiddle.net/vujMV/16/