css - webkit 动画适用于 chrome 但不适用于 firefox

Question

我有这个 fiddle http://jsfiddle.net/Dgy2Q/3/

#LeftDoor{
position: absolute;
height: 100%;
width:50%;
z-index: 30;
background-color: blue; 
left:0px;
 -webkit-animation: leftDoorOpen 1s ease 1s; 
 -webkit-animation-fill-mode: forwards;
-moz-animation: leftDoorOpen 4s ease 4s; 
-moz-animation-fill-mode: forwards;
}
@-webkit-keyframes leftDoorOpen {
    from {
       -webkit-transform: perspective(300) rotateY(0deg);
       -webkit-transform-origin: 0% 0%;
    }
    to {
       -webkit-transform: perspective(300) rotateY(90deg);
       -webkit-transform-origin: 0% 0%;
    }
}
@-moz-keyframes leftDoorOpen {
   from {
   -moz-transform: perspective(300) rotateY(0deg);
   -moz-transform-origin: 0% 0%;
}
to {
   -moz-transform: perspective(300) rotateY(90deg);
   -moz-transform-origin: 0% 0%;
    }
 }

在 chrome 中效果很好。它在 Firefox 中不起作用，我看不出我做错了什么？？？谁能看出我做错了什么？

谢谢

修改了 fiddle ，还是不开心？还有什么吗？

http://jsfiddle.net/Dgy2Q/10/

Answer 1

您在 perspective 函数中有错误。它的参数应该是一个长度，有一个单位。将 300 更改为 300px，它将在 Firefox 中工作。

http://jsfiddle.net/MrLister/Dgy2Q/6/

但结果并不相同。不确定是什么原因导致的，如果它可以用 CSS 纠正，或者它是否只是浏览器中的不同实现。