Moz動畫顯示在螢火蟲，但沒有運行

編輯：如果我改變URL的顏色，可以開始工作！但不能解決爲什麼網址無法在Firefox中工作。Moz動畫顯示在螢火蟲，但沒有運行

我很欣賞那裏有一些類似的問題，但沒有答案解決了我的問題。

我的@keyframes動畫在Firefox中不起作用，我嘗試過，沒有前綴，並打開螢火蟲檢查錯誤。

首先，代碼。請注意，我包含了元素.runner的所有樣式，因爲它是阻止動畫工作的代碼的其他部分。

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:49.5% ; 
height: 49.5% ; 
position: absolute ; 
top:0 ; left: 0 ; 
background: url(img/pic1.png) ; 
-webkit-animation: slideshow 20s infinite 2s ; 
-moz-animation: slideshow 20s infinite 2s ; 
animation: slideshow 20s infinite 2s} 

@-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)} 
} 

@-moz-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)} 
}

這是怎麼說螢火約.runner

.runner { 
animation: 20s ease 2s normal none infinite slideshow; 
background: url("img/pic1.png") repeat scroll 0 0 rgba(0, 0, 0, 0); 
border-radius: 40pt; 
box-shadow: 0 0 10pt #808080; 
height: 49.5%; 
left: 0; 
position: absolute; 
top: 0; 
width: 49.5%; 
} 

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

它然後重複這最後一部分。據推測，因爲前綴和非前綴版本都受支持。

在此先感謝。

來源

2014-02-23 DJC

它適用於我FF 30上。[演示]（http://jsfiddle.net/t9c7z/） – Oriol

好吧，我也得到了它的工作使用的顏色 - 但圖片網址不 - 雖然他們在鉻- 有任何想法嗎？ – DJC

我應該看到一個演示，以瞭解。也許你在Firefox中禁用了圖片，或者廣告攔截器阻止了它們，或者服務器沒有爲Firefox提供服務（用戶代理內容協商）等等。 – Oriol

經過進一步研究，似乎'背景'，加'背景圖像'不被視爲可以動畫的對象。爲什麼這個工作在鉻我不知道。

但是，將圖像疊加在另一個上面，然後在圖像上使用動畫（而不是背景）可以用於生成相同的效果，每個圖像具有不透明度和動畫延遲。

來源

2014-02-24 09:00:28 DJC

Moz動畫顯示在螢火蟲，但沒有運行

回答

相關問題