CSS3動畫在Firefox中表現不同

這是fiddle。

我已經搜索瞭解決方案，但沒有找到一個。

正確的應該是Chrome/Opera/Safari中的一個。

我只想顯示從上到下的圖像。

CSS3動畫在Firefox中表現不同

的HTML：

<div class="container"> 
    <img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg" /> 
</div>

的CSS：

@-webkit-keyframes pan { 
0% { 
    -webkit-transform: translate(0%, 0%); 
} 
100% { 
    top: 100%; 
    -webkit-transform: translate(0%, -100%); 
} 
} 
@keyframes pan { 
0% { 
    -webkit-transform: translate(0%, 0%); 
} 
100% { 
    top: 100%; 
    -webkit-transform: translate(0%, -100%); 
} 
} 

.container { 
position:relative; 
width:1100px; 
height:480px; 
overflow:hidden; 
background-color:#000; 
} 
.image { 
position:absolute; 
top: 0; 
max-width:100%; 
min-width:100%; 
-webkit-animation: pan 5s alternate infinite linear; 
animation: pan 5s alternate infinite linear; 
}

來源

2013-10-30 alex

，你既有'@ keyframes'和'@ -webkit-keyframes'這是很好的，但他們都包含'-webkit-''前綴風格tranform'，這可能是一個錯誤。顯然，前綴「@關鍵幀」應該包含前綴「變換」樣式。 – Spudley

Firefox不使用的WebKit爲什麼你-webkit-transform不會做任何事情。將其更改爲transform，它應該很有可能起作用。

I made a JSFiddle for you

@-webkit-keyframes pan { 
    0% { 
     -webkit-transform: translate(0%, 0%); 
    } 
    100% { 
     top: 100%; 
     -webkit-transform: translate(0%, -100%); 
    } 
} 
@keyframes pan { 
    0% { 
     transform: translate(0%, 0%); 
    } 
    100% { 
     top: 100%; 
     transform: translate(0%, -100%); 
    } 
}

來源

2013-10-30 11:22:34

但是它不適用於Chrome ..right alex87 –

如果瀏覽器支持'transform'，那麼'@keyframes pan'將被觸發，因此'-webkit'前綴不需要。但是，您應該在'@ -webkit-keyframes'塊中保留前綴。 –

任何想法爲什麼動畫是如此波濤洶涌？ – alex

CSS3動畫在Firefox中表現不同

回答

相關問題