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

【问题标题】：CSS3 transition difference between browsers in coverflow like slideshow幻灯片等coverflow中浏览器之间的CSS3过渡差异
【发布时间】：2013-06-12 13:18:42
【问题描述】：

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

我正在尝试使用 CSS3 过渡创建一个类似于幻灯片的 Coverflow，但我从不同的浏览器得到不同的结果：

FF;显示想要的行为（右幻灯片从右到中动画）。铬合金;首先将右侧幻灯片定位在左侧，然后动画到中心。 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;
}

【问题讨论】：

第一个问题做得很好。添加小提琴是巨大的。
@Jess thnx。你有机会帮忙吗？ - 我想我已经弄明白了为什么过渡是不稳定的；因为左右 'auto' 值和浏览器无法在 'auto' 之间转换：dev.w3.org/csswg/css-position/#left

标签： css cross-browser css-transitions

【解决方案1】：

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

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

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

【讨论】：