Firefox忽略幻燈片動畫

我製作了一個排序滑塊，它在Chrome上按預期工作。但是，它只有一半適用於Firefox。Firefox忽略幻燈片動畫

有2個動畫，淡入淡出效果和滑動效果。 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

來源

2014-02-25 He Hui

設置「不透明度」和「左」爲「0」http://codepen.io/anon/pen/ubvqA –

@ Mr.Alien的工作原理，但它會將前一張照片變黑，而下一張照片會滑動。另外，你知道爲什麼會發生這種情況嗎？ –

在photo類初始化左值：

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

codepen

此外，你應該使用每個供應商的前綴，而不僅僅是-webkit！

來源

2014-02-25 08:00:56 evuez

足夠接近。看起來我需要將z-index設置爲0，這樣動畫就是無縫的。如果你在答案中加上這個，我會盡我所能接受。 –

對，忘記了，我只是將它添加到我的答案和代碼簿中。 – evuez

Firefox忽略幻燈片動畫

回答

相關問題