Проблемы с плавным переходом CSS3 в Firefox 6

Question

Хорошо, моей первоначальной проблемой было перемещение элемента слева направо. Мой выбор - jQuery, поэтому я использовал animate.

Вот простой пример. http://jsfiddle.net/7NYwY/3/

В Firefox во время анимации примерно 3 "паузы" в одном и том же месте. В Chrome они не отображаются.

Так что я подумал, что я бы убрал его дальше и использовал CSS3 переходы

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

И я получаю точно такие же "паузы" в одном и том же месте. Я предполагаю, что jQuery абстрагирует эти переходы от меня, так что в действительности это один и тот же код.

Итак, вопрос в том, как заставить эту довольно простую анимацию плавно работать в Firefox и Chrome.

jQuery было бы неплохо, просто JS, если вы хотите похвастаться.

Answer 1

Вы не делаете переходы CSS3. Это будет работать гладко в 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' 
});

Более или менее то же самое для Firefox, но вы можете легко это изменить.