css - 为什么 CSS3 透视变换在 Firefox 中不起作用

Question

我正在尝试为下拉菜单创建一个 css 转换，但它在 firefox 中不起作用，这是 css 代码:

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

那么firefox改造有专门的代码吗？ 什么是困惑？

Answer 1

检查这个 fiddle ，看看它是否适合你。 http://jsfiddle.net/jybenjya/

它对我来说很好用。但您唯一需要更改的是为动画添加时间，方法是添加“animation-duration:”或将“animation-name”更改为“animation”并在末尾添加时间，如下所示

-webkit-animation: flipInX 3s;
animation: flipInX 3s;

为了安全起见，我通常包括所有前缀(firefox 为 moz)

  -webkit-animation: flipInX 3s;
     -moz-animation: flipInX 3s;
       -o-animation: flipInX 3s;
          animation: flipInX 3s;

-webkit-transform:
   -moz-transform:
    -ms-transform:
     -o-transform:
        transform:

等等，但在我的 jsfiddle 中我似乎不需要包含它们。