css動畫前綴錯誤

我有一個在chrome中工作的關鍵幀動畫，但不能在IE或Firefox中使用。css動畫前綴錯誤

我已經嘗試使用帶有@ -moz-keyframes前綴的-moz-animation前綴，其中一個而不是另一個，並且都嘗試過使用兩種方法，包括每個css行末尾的標準非前綴語句。

然而，沒有運氣。代碼中是否有其他錯誤？我正在使用最新的瀏覽器版本。

HTML

<div class="runner"></div>

CSS

.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(img/pic1.png) ; 
     -webkit-animation: slideshow 20s infinite 2s ; animation: slideshow 20s infinite 2s 
    } 

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

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

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

來源

2014-02-13 DJC

你忘了啓動FF的動畫： -webkit-animation：slideshow 20s infinite 2s; 動畫：幻燈片20s無限2s; 那裏也應該有-moz-animation。 :) –

謝謝，但據我所知，動畫前綴不再需要。無論如何，添加它沒有任何區別，它仍然不會運行！ – DJC

在FF和Chrome中爲我工作，看看：http://jsfiddle.net/J9aer/和圖像的另一個例子：http://jsfiddle.net/J9aer/3/ –

有你在css使用-moz-animation。我認爲這不是在你的css，併爲IE瀏覽器在IE 10中工作。

來源

2014-02-13 09:55:00 Arjun

你不需要這個前綴了，但是無論如何，我試着添加它，仍然不起作用！ – DJC

你的代碼在我的firefox 26.0中工作。我已經複製你的代碼並嘗試它，它工作正常... – Arjun

但它仍然不起作用 - 可能是什麼原因？ – DJC

css動畫前綴錯誤

回答

相關問題