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秒。 嘗試將其刪除和/或替換為以上轉換。*