Question

我已经制作了各种滑块，它在chrome上按预期工作。但是，只有一半适用于Firefox。

涉及2个动画，fadein效果和slidein效果。 firefox中只显示淡入淡出效果。

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类中的左侧值：

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

codepen

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

Firefox无视幻灯片动画

1 个答案: