为什么这个幻灯片不能在Firefox中运行？

Question

我创建了一个在Chrome中运行完美的幻灯片，但是，当我在Firefox中打开网站时，幻灯片显示根本没有显示。我已经尝试了一些关于我在StackOverflow上找到的解决方案的建议，但到目前为止还没有任何工作。

为什么会发生这种情况？

按下面的“运行代码段”以查看正在运行的代码。如果您使用Chrome，一切都应该可以正常工作，如果Firefox根本不能正常工作......

.slide-box {
	position: absolute;
	z-index: 1;
	height: 100vh;
	width: 100%;
}
.slide-box .slideshow {
	background-color: #000000;
	width: 100wv;
	height: 100vh;
}
.slide-box .slideshow .background {
	position: absolute; /* For overlapping of page 1*/
	width: 100%;
	height: 90vh;
	bottom: 0;
	left: 0;
	opacity: 0;
	z-index: 0;
	-webkit-backface-visibility: hidden;
	-webkit-animation: imageAnimation 48s linear infinite 0s;
	-moz-animation: imageAnimation 48s linear infinite 0s;
	-o-animation: imageAnimation 48s linear infinite 0s;
	-ms-animation: imageAnimation 48s linear infinite 0s;
	animation: imageAnimation 48s linear infinite 0s; 
	-webkit-filter: grayscale(10%);
	filter: grayscale(10%);
}
.slide-box .slideshow .background:nth-child(1) { 
	background: url(https://images5.alphacoders.com/330/330145.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.slide-box .slideshow .background:nth-child(2) { 
	background: url(https://hdwallsource.com/img/2014/4/background-wallpaper-22922-23558-hd-wallpapers.jpg) no-repeat center center;  
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-o-animation-delay: 8s;
	-ms-animation-delay: 8s;
	animation-delay: 8s; 
}
.slide-box .slideshow .background:nth-child(3) { 
	background: url(https://www.walldevil.com/wallpapers/a89/wallpapers-backgrounds-scenic-desktop-background-landscape-landscapes-nature-roads-road.jpg) no-repeat center center;  
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation-delay: 16s;
	-moz-animation-delay: 16s;
	-o-animation-delay: 16s;
	-ms-animation-delay: 16s;
	animation-delay: 16s; 
}
.slide-box .slideshow .background:nth-child(4) { 
	background: url(https://images5.alphacoders.com/330/330145.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 24s;
}
.slide-box .slideshow .background:nth-child(5) { 
	background: url(https://hdwallsource.com/img/2014/4/background-wallpaper-22922-23558-hd-wallpapers.jpg) no-repeat center center;  
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation-delay: 32s;
	-moz-animation-delay: 32s;
	-o-animation-delay: 32s;
	-ms-animation-delay: 32s;
	animation-delay: 32s; 
}
.slide-box .slideshow .background:nth-child(6) { 
	background: url(https://www.walldevil.com/wallpapers/a89/wallpapers-backgrounds-scenic-desktop-background-landscape-landscapes-nature-roads-road.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-animation-delay: 40s;
	-moz-animation-delay: 40s;
	-o-animation-delay: 40s;
	-ms-animation-delay: 40s;
	animation-delay: 40s; 
}

/* Animation for the slideshow images */

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

<div class="slide-box">
  <div class="slideshow">
	  <div class="background"></div>
		<div class="background"></div>
		<div class="background"></div>
		<div class="background"></div>
		<div class="background"></div>
		<div class="background"></div>
	</div>
</div>