Firefox和IE中的CSS動畫支持？

Question

當用戶將鼠標懸停在導航欄上時，我有CSS動畫。

問題是，他們都只在Chrome中工作。 他們都有正確的擴展，但沒有任何反應？

一個按鈕一個例子：

#WhatsWhatButton:hover 
{ 
-webkit-animation-name: sway; 
-webkit-animation-duration: 1.5s; 
-webkit-animation-fill-mode: both; 
-moz-animation-name: sway; 
-moz-animation-duration: 1.5s; 
-moz-animation-fill-mode: both; 
-ms-animation-name: sway; 
-ms-animation-duration: 1.5s; 
-ms-animation-fill-mode: both; 
-o-animation-name: sway; 
-o-animation-duration: 1.5s; 
-o-animation-fill-mode: both; 
animation-name: sway; 
animation-duration: 1s; 
animation-fill-mode: both; 
} 

@-webkit-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@-moz-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@-ms-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@-o-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

正如你可以看到，所有的關鍵幀有自己的擴展，以及從開始就內#WhatsWhatsButton:hover

然而，它仍然無法在IE中或動畫Firefox瀏覽器。

對於紀錄，我運行最新的Firefox（V22.0）和IE 10

Answer 1

Firefox和IE10都支持CSS動畫（現在連前綴的，所以沒有真正需要使用-ms-前綴因爲沒有需要它們的IE版本，而且-moz-可能也是安全的，因爲Firefox從版本16開始並不需要前綴）。但是'背景圖像'屬性在規範中被標記爲「不可動畫」。這就是爲什麼大多數瀏覽器無法通過CSS對它們進行動畫處理（交叉淡入淡出）的原因，只有Chrome瀏覽器具有這種非標準功能。一些關於這個主題的更多信息：CSS3 transition of background-image for Firefox not working

作爲一種解決方法，我建議創建2層背景（例如元素和僞元素）併爲頂層的不透明度設置動畫。