Smooth CSS3 transitions issues with Firefox 6

Okay my initial problem was to move an element from left to right. My framework of choice, is jQuery so I used animate.

Here is a simple example. http://jsfiddle.net/7NYwY/3/

In firefox, there is about 3 "pauses" at the same place during the animation. In Chrome these don't appear.

So I thought I'd strip it back further and use CSS3 transitions

http://jsfiddle.net/y6yW6/4/

And I'm getting the exact same "pauses" in the same place. I am presuming that jQuery is abstracting these transitions away from me so its the same code in reality.

So the question is, how would I get开发者_如何学Python this rather simple animation to work smoothly in firefox and chrome.

jQuery would be nice, pure JS if you want to show off.

You aren't doing CSS3 transitions. This will work smoothly in Chrome / iOS / Android:

var ele = $('#bike');

var dx = -500; // transformation
var duration = 3000; // duration in ms.
ele.css({ 
            '-webkit-transform': 'translate3d(' + -dx + 'px,0px,0px)', 
            '-webkit-transition-duration': (duration || 0) + 'ms', 
            '-webkit-backface-visibility': 'hidden', 
            '-webkit-transition-property': '-webkit-transform' 
});

More or less the same for Firefox, but you can easily fiddle that out.