Question

我正在尝试创建一个门摆动打开和关闭的3D CSS效果。我有一个动画工作的CodePen，我喜欢它：

http://codepen.io/caleuanhopkins/pen/Dslpv

这是css：

.frame--realistic {
  perspective: 20em;
}

.door {
height: inherit;
background: darksalmon;
}

.frame {
margin: .5em auto;
border: solid 1em saddlebrown;
width: 500px;
height: 6.5em;
}

.door--open {
-webkit-transform-origin: 0 0 /*whatever y value you wish*/;
-moz-transform-origin: 0 0 /*whatever y value you wish*/;
-ms-transform-origin: 0 0 /*whatever y value you wish*/;
-o-transform-origin: 0 0 /*whatever y value you wish*/;
transform-origin: 0 0 /*whatever y value you wish*/;
-webkit-transform: rotateY(-45deg);
-moz-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
-o-transform: rotateY(-45deg);
transform: rotateY(-45deg);
}

@-webkit-keyframes doorani {
  from { 
-webkit-transform: rotateY(0deg);
  }
  to { 
-webkit-transform: rotateY(20deg);
  }
}


.frame:hover .door--ani {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-moz-animation: doorani 1s 1 normal forwards;
-webkit-animation: doorani 1s 1 normal forwards;
-ms-animation: doorani 1s 1 normal forwards;
-o-animation: doorani 1s 1 normal forwards;
animation: doorani 1s 1 normal forwards;
}

@-webkit-keyframes doorout {
  from { 
-webkit-transform: rotateY(20deg);
  }
  to { 
-webkit-transform: rotateY(0deg);
  }
}

@keyframes doorani {
  from { 
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
  }
  to { 
-moz-transform: rotateY(20deg);
-ms-transform: rotateY(20deg);
-o-transform: rotateY(20deg);
transform: rotateY(20deg);
  }
}

@keyframes doorout {
  from { 
-moz-transform: rotateY(20deg);
-ms-transform: rotateY(20deg);
-o-transform: rotateY(20deg);
transform: rotateY(20deg);
  }
  to { 
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
  }
}

.door--ani {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-moz-animation: doorout 1s 1 normal forwards;
-webkit-animation: doorout 1s 1 normal forwards;
-ms-animation: doorout 1s 1 normal forwards;
-o-animation: doorout 1s 1 normal forwards;
animation: doorout 1s 1 normal forwards;
}

HTML：

<div class='container'>
  <div class='frame frame--realistic'>
    <div class='door door--ani'> </div>
  </div>
</div>

然而，主要问题是当您在门上方盘旋后门向后摆动。动画结束前有一个非常轻微的闪烁。有没有人知道为什么这样做，如果有什么我可以改变/添加来解决这个问题？

更新：代码原本没有针对webkit浏览器运行，我现在已经更新了代码，但闪烁的问题仍然出现在Firefox中。

在Firefox中闪烁的透视3D动画

0 个答案: