0

嗨，我正在使用 CSS 转换效果，我正在尝试创建 2 个打开显示网站的 div。我有这个工作，但是当门完成打开时，它们会重新出现并隐藏我想要展示的内容！！！！！！

效果完成后如何保持门打开，感谢您的帮助！

这是一个显示问题的基本小提琴，http://jsfiddle.net/BaHzN/

<div id="content">
<div id="leftDoor">LEFTDOOR</div>
<div id="rightDoor">RIGHTDOOR</div>
</div>

#leftDoor{
    background-color:red;
    left:0px;
    -webkit-animation: leftDoorOpen 4s ease 4s; 

}
#rightDoor{
    right:0px;
    background-color:red;
    -webkit-animation: rightDoorOpen 4s ease 4s; 
}



@-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%;
    }
  }

@-webkit-keyframes rightDoorOpen {
  from {
     -webkit-transform: perspective(300) rotateY(0deg);
     -webkit-transform-origin: 0% 0%;
  }
  to {
     -webkit-transform: perspective(300) rotateY(-90deg);
     -webkit-transform-origin: 100% 0%;

   }
 }
4

1 回答 1

1

您可以使用-webkit-animation-fill-mode: forwards;

Mozilla 文档

JSFiddle

于 2013-08-13T20:49:07.673 回答