CSS幻燈片在Firefox中不起作用

Question

我有點卡住，試圖讓下面的代碼在Firefox中正常運行，它在Chrome中正常工作，但在Firefox中不起作用，如果有人可以幫助，我會很高興。

CSS

.SlidingPhotoFrame{ max-width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; padding:5px; margin-bottom:10px; background-color:white; } 

.SlidingPhoto { 
padding-top: 50.20%; /* 450px/800px = 0.5625 */ 
margin:0; text-align:center; 

background:url(Slideshow/1.JPG)) center top no-repeat; 
background-size: cover; 
-moz-background-size: cover; /* Firefox 3.6 */ 
background-position: center; /* Internet Explorer 7/8 */ 

animation-name:PhotoFrames; 
animation-duration:20s; 
animation-timing-function:ease-in-out; 
animation-delay:0s; 
animation-iteration-count:infinite; 
animation-play-state:running; 

    /* Safari and Chrome: */ 
-webkit-animation-name:PhotoFrames; 
-webkit-animation-duration:20s; 
-webkit-animation-timing-function:ease-in-out; 
-webkit-animation-delay:0s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-play-state:running; 
} 


@keyframes PhotoFrames 
{ 
0% {background:url(Slideshow/1.JPG) center top no-repeat; } 
23% {background:url(Slideshow/1.JPG) center top no-repeat; } 

25% {background:url(Slideshow/2.JPG) center top no-repeat; } 
47% {background:url(Slideshow/2.JPG) center top no-repeat; } 

50% {background:url(Slideshow/3.JPG) center top no-repeat; } 
74% {background:url(Slideshow/3.JPG) center top no-repeat; } 

75% {background:url(Slideshow/4.JPG) center top no-repeat; } 
97% {background:url(Slideshow/4.JPG) center top no-repeat; } 

100% {background:url(Slideshow/1.JPG) center top no-repeat; } 
} 

@-webkit-keyframes PhotoFrames /* Safari and Chrome */ 
{ 
0% {background:url(Slideshow/1.JPG) center top no-repeat; } 
23% {background:url(Slideshow/1.JPG) center top no-repeat; } 

25% {background:url(Slideshow/2.JPG) center top no-repeat; } 
47% {background:url(Slideshow/2.JPG) center top no-repeat; } 

50% {background:url(Slideshow/3.JPG) center top no-repeat; } 
74% {background:url(Slideshow/3.JPG) center top no-repeat; } 

75% {background:url(Slideshow/4.JPG) center top no-repeat; } 
97% {background:url(Slideshow/4.JPG) center top no-repeat; } 

100% {background:url(Slideshow/1.JPG) center top no-repeat; } 
} 

** ** HTML

<div class="SlidingPhotoFrame"> 
    <figure class="SlidingPhoto"></figure> 
</div> 

如果有一個更好的方式做同樣的事情，請建議，我想保持代碼儘可能的簡單， 只要有可能。還沒有檢查Safari或IE尚未...任何建議，這也將是偉大的。

Answer 1

您可以查看以下基於現代交叉瀏覽器的示例。 我認爲你需要使用-moz前綴才能在Mozilla Firefox上工作。

-moz-animation-name:PhotoFrames; 
-moz-animation-duration:20s; 
-moz-animation-timing-function:ease-in-out; 
-moz-animation-delay:0s; 
-moz-animation-iteration-count:infinite; 
-moz-animation-play-state:running; 

請參考這一項上jsfiddle

Answer 2

這裏是一個演示，請與您的圖像將其用於更好的視野。 Here is a JSFiddle of it。

使用此CSS代碼和HTML代碼：

<div class="SlidingPhotoFrame"> 
    <figure class="SlidingPhoto"></figure> 
</div> 


.SlidingPhotoFrame{ max-width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; padding:5px; margin-bottom:10px; background-color:white; } 

.SlidingPhoto { 
padding-top: 50.20%; /* 450px/800px = 0.5625 */ 
margin:0; text-align:center; 

background:url(http://lorempixel.com/400/200/) center top no-repeat; 
background-size: cover; 
-moz-background-size: cover; /* Firefox 3.6 */ 
background-position: center; /* Internet Explorer 7/8 */ 

animation-name:PhotoFrames; 
animation-duration:20s; 
animation-timing-function:ease-in-out; 
animation-delay:0s; 
animation-iteration-count:infinite; 
animation-play-state:running; 
animation-fill-mode: forwards; 

    /* Safari and Chrome: */ 
-webkit-animation-name:PhotoFrames; 
-webkit-animation-duration:20s; 
-webkit-animation-timing-function:ease-in-out; 
-webkit-animation-delay:0s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-play-state:running; 
-webkit-animation-fill-mode: forwards; 
} 


@keyframes PhotoFrames 
{ 
0% { 
     opacity: 0; 
     left: -100px; 
    } 

    50% { 
     opacity: 1; 
    } 

    75% { 
     background:url(http://lorempixel.com/400/200/) center top no-repeat; 
     opacity: 1; 
     left: 100px; 
    } 

    100% { 
     background:url(http://lorempixel.com/400/200/) center top no-repeat; 
     opacity: 0; 
     left: 500px; 
    } 

Answer 3

這不是工作，因爲Firefox不支持背景圖片的動畫。背景圖像不具動畫性。 Chrome有它自己的實現，但你不會使它工作的Firefox。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties