CSS3 transition difference between browsers in coverflow like slideshow - css

Question

See: http://jsfiddle.net/nweBD/
I'm trying to create a Coverflow like slideshow using CSS3 transitions, but I'm getting different results from different browsers:
FF; shows wanted behaviour (right slide animates from right to center).
CHROME; first positions right slide at left side, then animates to center.
IE10; does nothing
HTML:
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
CSS:
div{
position:absolute;
width: 300px;
height:100px;
background-color: yellow;
margin-left: -150px;
left: 50%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.middle{
text-align:center;
z-index:2;
height:120px;
}
.left{
text-align:left;
left: 0;
right: auto;
margin-left: 0;
background-color:green;
}
.right{
cursor:pointer;
text-align:right;
right: 0;
left: auto;
margin-left:0;
background-color:red;
}

Answer 1

The problem here is indeed that browsers have no, or at best, various results for animating to and from 'auto'.
To fix this, I have re-written the CSS to not use left:auto; right:0; but left:100%; margin-left:-300px. This means I only have to animate the left and margin-left property, and I don't need to reset them to the default auto. The negative margin is the same amount as the width of the element, which pulls it back to the desired position, giving the same result as right:0;.
Here's an updated fiddle: http://jsfiddle.net/nweBD/3/