I would be grateful for any help here.

If I set a transform:translate(x,y) using jQuery I don't seem to be then able then set another transform:translate(x,y) using CSS.

I've provided a Codepen example.

If you comment out line 13 (where jQuery sets the CSS transform) of the JS window and click Run, when clicking the button, the transform works fine. If you remove the comment and allow jQuery to initially randomly position the element and then click the button, translate(x,y) doesn't seem to work.

http://codepen.io/_d_v_/pen/wMmLRV

I would be very grateful if anyone can enlighten me on why this is happening and what the solution is.

I'm using Chrome  Version 46.0.2490.80 (64-bit) on Mac OS X 10.11.2

Many thanks in advance