CSS3 Jumpy Animations?

Question

I am creating a simple CSS3 slider. When doing two different property transitions, specifically a transform: scale3d and a left , the animation does the transform first, then jumps to do the left.

The jump only occurs when the animations are complete. In other words, if you continously click the next section, then the transitions are smooth.

Here is the website

I made a jsFiddle and it seems to work how I want to on the jsFiddle: http://jsfiddle.net/BdG4k

Essentially, this is the format of my code:

#slider > * {
    margin-left: -270px;
    position: absolute;
    -webkit-transition: all 1s;
}
#slider .module.leftX {
    left: XX%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}

Note: I am only using -webkit until I get it to work. Then I will add -moz and -ms.

Answer 1

Aaron the problem is you are using transform property just for the webkit browser only.

In your js file slider.js you are using only chrome specific vendor prefix -webkit . Try to add -moz prefix for Firefox also for IE.

$('#slider').ready( function() {
function slide(focus) {
var l1css = {
'opacity': 0.8,
'-webkit-transform': 'scale3d(0.5, 0.5, 1)',
'-moz-transform': 'scale3d(0.5, 0.5, 1)', /*for Firefox*/
'transform': 'scale3d(0.5, 0.5, 1)', /*for IE*/
'margin-left': '-135px',
'left': '19%'
}; 

please check the working Demo