Question

我有这个小提琴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中不起作用，我看不出我做错了什么???谁能看到我做错了什么？

感谢

修正了小提琴，但仍然没有喜悦？其他什么？

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

Answer 1

perspective功能中存在错误。它的参数应该是一个长度，单位。将300更改为300px，它可以在Firefox中使用。

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

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

webkit动画适用于chrome但不适用于Firefox

1 个答案: