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 版本上不支持 ），要么是B。）您必须为该浏览器添加其他特定的处理方法才能读取它。 您似乎已经使用“ Chrome，Safari，Opera（？） ”完成了此操作。 以下是一些特定于Firefox的信息 。

---

注意： //

您的@-moz-keyframes {

像其他通话一样没有slideshow_animation 。

可能是拼写错误，这可能是您的问题;）

---

因此，对于Chrome中的闪烁，您似乎没有设置过渡（在背景图片更改之前） ； 因此默认情况下CSS3有点断断续续。

例如。

   transition: all 0.3s ease-in-out;

*照片更改之前，您似乎还延迟了0.5秒。 尝试将其删除和/或替换为以上转换。*