需要关键帧动画css3在Moz（Firefox 4）的帮助

Question

现在，Firefox 4出了我想获得一些我的网站有一个铬动画，在Firefox中工作。我已经得到了所有在firefox中工作的简单动画（旋转，移动等），但不知道是否有可能像使用chrome（webkit）那样执行关键帧动画？

铬动画的下面是一个例子

@-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都无济于事。任何信息都会很棒。

非常感谢

尼克

Answer 1

火狐还不支持CSS动画，请按照bug 435442跟踪开发进度。这个bug相当活跃，所以我猜想他们正在试图将其引入下一个版本。

Answer 2

正如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/