Html CSS幻灯片在Firefox中不起作用

我在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>

---

如果有更好的方法做同样的事情，请建议，我喜欢尽可能地保持代码的简单，只要可能。还没有检查过狩猎或IE。。。任何关于这方面的建议都会很好。

您可以查看以下基于现代跨浏览器的示例。 我认为您需要使用-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;

---

请参考

上的这一部分，这里有一个演示，请将它与您的图像一起使用，以便更好地查看

使用以下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;
    }

.slidengphotoframe{max width:100%；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；边框：1px实心#bbe3ff；填充：5px；边框底部：10px；背景色：白色；}
.slidengphoto{
填料顶部：50.20%；/*450px/800px=0.5625*/
边距：0；文本对齐：居中；
背景：url(http://lorempixel.com/400/200/)中上不重复；
背景尺寸：封面；
-moz背景尺寸：cover；/*Firefox 3.6*/
背景位置：中心；/*Internet Explorer 7/8*/
动画名称：相框；
动画持续时间：20秒；
动画计时功能：轻松进出；
动画延迟：0s；
动画迭代次数：无限；
动画播放状态：运行；
动画填充模式：正向；
/*Safari和Chrome：*/
-webkit动画名称：PhotoFrames；
-webkit动画持续时间：20秒；
-webkit动画计时功能：轻松输入输出；
-webkit动画延迟：0秒；
-webkit动画迭代计数：无限；
-webkit动画播放状态：正在运行；
-webkit动画填充模式：正向；
}
@关键帧照片帧
{
0% {
不透明度：0；
左：-100px；
}
50% {
不透明度：1；
}
75% {
背景：url(http://lorempixel.com/400/200/)中上不重复；
不透明度：1；
左：100px；
}
100% {
背景：url(http://lorempixel.com/400/200/)中上不重复；
不透明度：0；
左：500px；
}

这不起作用，因为Firefox不支持背景图像上的动画。背景图像不可设置动画。Chrome有自己的实现，但你无法让它在Firefox上工作。

JSFIDLE会有所帮助。在“野生”中，我看到了

@-webkit关键帧

，但我没有看到

@-moz关键帧

..）I-fi与您的JSFIDLE进行DDLE处理并将其添加到我的代码中，但似乎仍然不起作用，显示第一个图像，但不会更改到下一个图像。：s这是FIDLE链接。。在发布链接时，我总是会出错。@pople Shadow此解决方案对您有效吗？链接已发布在上述注释中。