css - 幻灯片等coverflow中浏览器之间的CSS3过渡差异

Question

见：http: //jsfiddle.net/nweBD/

我正在尝试使用 CSS3 转换创建像幻灯片一样的 Coverflow，但我从不同的浏览器得到不同的结果：

法郎; 显示想要的行为（右幻灯片从右到中动画）。铬合金; 首先将右侧幻灯片定位在左侧，然后动画到中心。IE10；什么也没做

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

这里的问题确实是浏览器没有，或者充其量没有各种动画到“自动”和“自动”的结果。

为了解决这个问题，我重新编写了 CSS 以不使用left:auto; right:0;但是left:100%; margin-left:-300px. 这意味着我只需为leftandmargin-left属性设置动画，不需要将它们重置为默认值auto。负边距与元素的宽度相同，将其拉回所需位置，结果与right:0;.

这是一个更新的小提琴：http: //jsfiddle.net/nweBD/3/