我正在尝试为下拉菜单创建一个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转换的特殊代码吗? 什么是混乱?
答案 0 :(得分:0)
检查这个小提琴,看看它是否适合你。 http://jsfiddle.net/jybenjya/
它对我来说很好。但你唯一需要改变的是为动画添加一个时间,可以通过添加“animation-duration:”或将'animation-name'改为'animation'并在末尾添加时间如下所示
-webkit-animation: flipInX 3s;
animation: flipInX 3s;
为了安全起见我通常包括所有前缀(moz for firefox)
-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中我似乎不需要包含它们。
答案 1 :(得分:0)
Linux和旧版Windows计算机(没有WebGL
支持的计算机)的某些配置在使用3D转换时遇到问题,并将它们视为透视设置为none
。
Windows上的Firefox 不正确 renders plugin content within no-op 3D transforms。