html - Firefox 忽略幻灯片动画

Question

我制作了某种 slider ，它在 chrome 上按预期工作。然而，它只有一半适用于 Firefox。

涉及到2个动画，一个fadein效果，一个slidein效果。在firefox中只显示fadein效果。

HTML

<div class="container">
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
</div>

CSS

body{background:#202133;}
.container{
  margin:50px auto;
  width:700px;
  height:485px;
  overflow:hidden;
  position:relative;
}
.container img{
  width:700px;
  height:485px;
}
.photo{
  position:absolute;
  animation:round 6s infinite;
  opacity:1;
}
@keyframes round{
  0%{
    left: -1000px;opacity:0.5;z-index:1000;
  }
  50%{
    left: 0px; opacity:1;
  }
}
@-webkit-keyframes round{
  0%{
    left: -1000px;opacity:0.5;z-index:1000;
  }
  50%{
    left: 0px; opacity:1;
  }
}
img:nth-child(2){animation-delay:0s;}
img:nth-child(1){animation-delay:3s;}

知道为什么吗？

Codepen Link

Answer 1

初始化 photo 类中的 left 值:

.photo{
  position:absolute;
  animation:round 6s infinite;
  opacity:1;
  left: 0px;
  z-index: 0;
}

codepen

此外，您应该使用每个供应商前缀，而不仅仅是 -webkit!