幻灯片淡入淡出效果

Question

我有一个幻灯片，在css中使用淡入淡出效果，我还有一个javascript来自动更改图像。问题是，mozila firefox不能读取我的淡入淡出效果，它会在图像之间显示身体内容的背景。

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000);    
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 0.5s;
}

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin: 0}
.mySlides {display:none}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
} 

@-webkit-keyframes fade {
  from {opacity: .1;}
  to {opacity: 4;}
}

@keyframes fade {
  from {opacity: .1;}
  to {opacity: 4;}
}