-moz-animation爲什麼不起作用？

以下CSS在Webkit中正常工作。沒有在Opera中檢查過它，但我知道它不適用於Firefox。有人可以告訴我爲什麼嗎？-moz-animation爲什麼不起作用？

正確的類肯定會應用到我的HTML（使用Firebug檢查它，並且我確實在.arrow上看到-moz-animation: 500ms ease 0s normal forwards 1 arrowRotateDot屬性）。

這也不適用於IE9，雖然我原本有-ms-animation:...和-ms-transform:...。我認爲它應該在IE9中工作，但當它不是我只是假設IE不支持這些。但是，既然它不在Firefox中工作，也許其他事情正在發生。

.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.dot .dvd .arrow { 
    -webkit-animation: arrowRotateDot 500ms forwards; 
    -moz-animation: arrowRotateDot 500ms forwards; 
    -o-animation: arrowRotateDot 500ms forwards; 
    animation: arrowRotateDot 500ms forwards; 
} 
.page.updatesPodcasts > .mainContent > .content .contentUpdates .disc.f2 .dvd .arrow { 
    -webkit-animation: arrowRotateF2 500ms forwards; 
    -moz-animation: arrowRotateF2 500ms forwards; 
    -o-animation: arrowRotateF2 500ms forwards; 
    animation: arrowRotateF2 500ms forwards; 
} 

@-webkit-keyframes arrowRotateDot { 
    100% { 
     left:-18px; top:182px; 
     -moz-transform: scale(1) rotate(-30deg); 
     -webkit-transform: scale(1) rotate(-30deg); 
     -o-transform: scale(1) rotate(-30deg); 
     transform: scale(1) rotate(-30deg); 
     } 
} 
@-webkit-keyframes arrowRotateF2 { 
    0% { 
     left:-18px; top:182px; 
     -moz-transform: scale(1) rotate(-30deg); 
     -webkit-transform: scale(1) rotate(-30deg); 
     -o-transform: scale(1) rotate(-30deg); 
     transform: scale(1) rotate(-30deg); 
     } 
    100% { 
     left:115px; top:257px; 
     -moz-transform: scale(1) rotate(-90deg); 
     -webkit-transform: scale(1) rotate(-90deg); 
     -o-transform: scale(1) rotate(-90deg); 
     transform: scale(1) rotate(-90deg); 
     } 
}

來源

2011-09-30 maxedison

您的動畫不能在Firefox的工作，因爲你正在使用@ - 的webkit -keyframes，僅適用於WebKit瀏覽器，即Chrome和Safari。（某種程度上）跨瀏覽器做動畫關鍵幀的方法是：

@keyframes animationName { 
    /* animation rules */ 
} 

@-moz-keyframes animationName { 
    /* -moz-animation rules */ 
} 

@-webkit-keyframes animationName { 
    /* -webkit-animation rules */ 
}

Opera和Internet Explorer目前不支持@keyframes規則。

來源

2011-09-30 20:42:23 skyline3000

咄。謝謝:) – maxedison

Internet Explorer 10支持'@keyframes'規則。（不使用'-ms-'前綴） –