Question

我正在玩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%;

   }
 }

Answer 1

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

Mozilla Docs

的 JSFiddle

CSS转换创建门打开效果并保持打开状态

1 个答案: