css-transforms - CSS変換ドアオープン効果を作成し、開いたままにします

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 ドキュメント

JSFiddle