CSS 幻灯片不再在 Firefox 中工作；在所有其他浏览器中闪烁

Question

我有一个页面上有幻灯片的网站。它在 Chrome 和 IE 和 Safari 中运行了一年，但现在它在浏览器中开始闪烁，在 Firefox 中根本无法运行。

这是我正在谈论的示例： ostapenko-photo.com

#slideshow {               
    position: absolute;
    top:0;
    left:0; 
    display: block; 
    z-index: -10;
    width: 100%; 
    height: 100%;
    min-width: 400px;
    background: url(../slideshow/01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 0px;
    padding-top: 0px;

    animation: slideshow_animation 60s; 
    animation-delay: 0.5s;
    animation-iteration-count: infinite;*/

    /*Chrome, Safari, Opera */
    -webkit-animation: slideshow_animation 60s; 
    -webkit-animation-delay: 0.5s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation: slideshow_animation 60s;
    -moz-animation-delay: 0.5s;
    -moz-animation-iteration-count: infinite;

    -o-animation: slideshow_animation 60s;
    -o-animation-delay: 0.5s;
    -o-animation-iteration-count: infinite;
}

@keyframes slideshow_animation {
    6.25%   {background-image: url(../slideshow/01.jpg);}
    12.5%   {background-image: url(../slideshow/02.jpg);}
    18.75%  {background-image: url(../slideshow/03.jpg);}
    25%     {background-image: url(../slideshow/04.jpg);}
    31.25%  {background-image: url(../slideshow/05.jpg);}
    37.5%   {background-image: url(../slideshow/06.jpg);}
    42.75%  {background-image: url(../slideshow/07.jpg);}
    50%     {background-image: url(../slideshow/08.jpg);}
    56.25%  {background-image: url(../slideshow/09.jpg);}
    62.5%   {background-image: url(../slideshow/10.jpg);}
    68.75%  {background-image: url(../slideshow/11.jpg);}
    75%     {background-image: url(../slideshow/12.jpg);}
    81.25%  {background-image: url(../slideshow/13.jpg);}
    87.5%   {background-image: url(../slideshow/14.jpg);}
    93.75%  {background-image: url(../slideshow/15.jpg);}
    100%    {background-image: url(../slideshow/16.jpg);}
}

@-webkit-keyframes slideshow_animation {
    6.25%   {background-image: url(../slideshow/01.jpg);}
    12.5%   {background-image: url(../slideshow/02.jpg);}
    18.75%  {background-image: url(../slideshow/03.jpg);}
    25%     {background-image: url(../slideshow/04.jpg);}
    31.25%  {background-image: url(../slideshow/05.jpg);}
    37.5%   {background-image: url(../slideshow/06.jpg);}
    42.75%  {background-image: url(../slideshow/07.jpg);}
    50%     {background-image: url(../slideshow/08.jpg);}
    56.25%  {background-image: url(../slideshow/09.jpg);}
    62.5%   {background-image: url(../slideshow/10.jpg);}
    68.75%  {background-image: url(../slideshow/11.jpg);}
    75%     {background-image: url(../slideshow/12.jpg);}
    81.25%  {background-image: url(../slideshow/13.jpg);}
    87.5%   {background-image: url(../slideshow/14.jpg);}
    93.75%  {background-image: url(../slideshow/15.jpg);}
    100%    {background-image: url(../slideshow/16.jpg);}
} 

@-moz-keyframes {
    6.25%   {background-image: url(../slideshow/01.jpg);}
    12.5%   {background-image: url(../slideshow/02.jpg);}
    18.75%  {background-image: url(../slideshow/03.jpg);}
    25%     {background-image: url(../slideshow/04.jpg);}
    31.25%  {background-image: url(../slideshow/05.jpg);}
    37.5%   {background-image: url(../slideshow/06.jpg);}
    42.75%  {background-image: url(../slideshow/07.jpg);}
    50%     {background-image: url(../slideshow/08.jpg);}
    56.25%  {background-image: url(../slideshow/09.jpg);}
    62.5%   {background-image: url(../slideshow/10.jpg);}
    68.75%  {background-image: url(../slideshow/11.jpg);}
    75%     {background-image: url(../slideshow/12.jpg);}
    81.25%  {background-image: url(../slideshow/13.jpg);}
    87.5%   {background-image: url(../slideshow/14.jpg);}
    93.75%  {background-image: url(../slideshow/15.jpg);}
    100%    {background-image: url(../slideshow/16.jpg);}
}

我有一个 id 为 slideshow 的 div，我通过 CSS 更改了它的背景。

1. 为什么它在 Firefox 中不起作用？
2. 为什么它在 Chrome 中闪烁？ （它并不总是闪烁，这让我更难以弄清楚原因）

Answer 1

我认为这意味着您的 CSS3 动画方法是 A.) 尚未在 （您的版本） Firefox 上 supported 或 B.) 您必须为该浏览器添加额外的特定处理才能阅读它。 您似乎已经使用 'Chrome、Safari、Opera(?)' 做到了这一点。 下面是一些特定于 Firefox 的 info。

---

注意：//

你的@-moz-keyframes {

后面没有slideshow_animation，就像您的其他电话一样。

可能是错字，这可能是你的问题；）

---

因为，对于 Chrome 中的闪烁，您似乎没有设置过渡 （在背景图像更改之前）；所以默认情况下 CSS3 有点不稳定。

例如

   transition: all 0.3s ease-in-out;

*在照片更改之前，您似乎还有 .5 秒的延迟。尝试删除它和/或替换为上述转换。*