Firefox에서 CSS 슬라이드 쇼가 작동하지 않습니다.

Question

Firefox에서 제대로 작동하려면 다음 코드를 얻으려고 조금 힘들었습니다. Chrome에서 정상적으로 작동하지만 파이어 폭스에서는 작동하지 않습니다. 누군가가 기뻐할 수 있다면 도움이 될 것입니다.

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

현대 크로스 브라우저를 기반으로하는 아래 샘플을 검토 할 수 있습니다. Mozilla Firefox에서 작동하려면 -moz 접두어를 사용해야한다고 생각합니다.

-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

이 것은 작동하지 않습니다. 배경 이미지는 애니메이션 가능하지 않습니다. Chrome은 자체 구현되어 있지만 Firefox에서 작동시키지 않습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties