Question

我正在尝试使用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;
}

Answer 1

这里的问题确实是浏览器没有或者至多有各种结果可以用于动画来自“自动”。

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

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

浏览器中的浏览器之间的CSS3过渡差异，如幻灯片放映

1 个答案: