需要關鍵幀動畫css3在Moz（Firefox 4）的幫助

現在，Firefox 4出了我想獲得一些我的網站有一個鉻動畫，在Firefox中工作。我已經得到了所有在firefox中工作的簡單動畫（旋轉，移動等），但不知道是否有可能像使用chrome（webkit）那樣執行關鍵幀動畫？需要關鍵幀動畫css3在Moz（Firefox 4）的幫助

鉻動畫的下面是一個例子

@-webkit-keyframes "sway" { 
0% { -webkit-transform: rotate(0deg);} 
25% {-webkit-transform: rotate(-2deg); } 
50% {-webkit-transform: rotate(2deg); } 
75% {-webkit-transform: rotate(-2deg); } 
100% { -webkit-transform: rotate(2deg); }}

我這個動畫以「-webkit-動畫的名字：」搖擺「」。只需將所有前綴更改爲moz都無濟於事。任何信息都會很棒。

非常感謝

尼克

來源

2011-04-05 Nick

火狐還不支持CSS動畫，請按照bug 435442跟蹤開發進度。這個bug相當活躍，所以我猜想他們正在試圖將其引入下一個版本。

來源

2011-04-05 17:21:37 robertc

正如robertc所說，Firefox中沒有css動畫，只有轉換。如果你的動畫只是一個驚天盒就像你在你的CSS有，你會實現它很容易使用JavaScript的一點點鏈接的轉換...

你的CSS：

#yourdiv { 
    -moz-transition: all 200ms ease; 
}

你的JavaScript：

//onload body 
var element = document.getElementById("yourdiv"); 
element.style.MozTransform = "rotate(2deg)"; 
element.addEventListener("transitionend", function(){ 
    var rotate = (element.style.MozTransform == "rotate(2deg)") ? "rotate(-2deg)" : "rotate(2deg)"; 
    element.style.MozTransform = rotate; 
}, false);

在Firefox我沒有實際測試過，但這裏的WebKit的工作版本：

http://jsfiddle.net/J6SMb/

來源

2011-04-05 23:59:38 Duopixel

需要關鍵幀動畫css3在Moz（Firefox 4）的幫助

回答

相關問題