CODEWITHSUNDEEP
javascriptjqueryanimationcss
johnwards
johnwards

Reputation: 1901

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 this rather simple animation to work smoothly in firefox and chrome.

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

Upvotes: 2

Views: 611

Answers (1)

Jan Jongboom
Jan Jongboom

Reputation: 27323

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.

Upvotes: 1

Related Questions