動畫和關鍵幀無法在Firefox中工作

Question

我一直無法使我的網站在所有主流瀏覽器上都能正常工作，並且我再次陷入困境。我的關鍵幀動畫不能在Firefox中運行，我無法弄清楚原因。它在Chrome中完美運行。

.runner { 
    border-radius: 40pt; 
    -webkit-box-shadow: 0 0 10pt grey; 
     -moz-box-shadow: 0 0 10pt grey; 
      box-shadow: 0 0 10pt grey; 
    width:494px; 
    height: 415.8px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url(pic1.png); 
    -webkit-animation: slideshow 20s infinite 2s; 
     -moz-animation: slideshow 20s infinite 2s; 
      animation: slideshow 20s infinite 2s; 
} 

@keyframes slideshow { 
    20%  { background: url(pic1.png) } 
    25%, 45% { background: url(pic2.png) } 
    50%, 70% { background: url(pic3.png) } 
    75%, 95% { background: url(pic4.png) } 
} 

@-webkit-keyframes slideshow { 
    20%  { background: url(pic1.png) } 
    25%, 45% { background: url(pic2.png) } 
    50%, 70% { background: url(pic3.png) } 
    75%, 95% { background: url(pic4.png) } 
} 

Answer 1

首先，我使用的是Firefox 28

下面是從W3學校的教程。 所以我認爲值得看看。

CSS3 Animation Property try out

的一件事是，我覺得教程已更新，-moz-環節似乎並不在那裏。 因此，就兼容性而言，IE和Firefox 3.5以及之前版本的侏儒版本可能會產生問題。

Answer 2

您不需要-moz動畫前綴anymore，但您確實需要在關鍵幀（@ - moz-keyframes）上添加前綴。