Question

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

Chrome动画的示例位于

之下

@-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-animation-name：”sway“”为此设置动画。简单地将所有前缀更改为moz并没有帮助。任何信息都会很棒。

非常感谢

尼克

Answer 1

Firefox尚不支持CSS动画，请按bug 435442跟踪开发进度。该错误相当活跃，所以我猜他们正试图将其纳入下一个版本。

Answer 2

正如罗伯特所说，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/

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

2 个答案: