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