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

嗨，我正在玩CSS转换效果，我试图创建2个div，打开显示该网站。我有这个工作，但当门已经完成打开他们重新出现和隐藏的内容，我期待着显示

当效果完成时，我如何保持门打开，谢谢你的帮助

这是一把基本的小提琴，展示了这个问题

左门
右门
#左门{
背景色：红色；
左：0px；
-webkit动画：左门打开4s轻松4s；
}
#右门{
右：0px；
背景色：红色；
-webkit动画：右门开启4s轻松4s；
}
@-webkit关键帧leftDoorOpen{
从{
-webkit变换：透视（300）旋转（0度）；
-webkit转换源：0%0%；
}
到{
-webkit变换：透视（300）旋转（90度）；
-webkit转换源：0%0%；
}
}
@-webkit关键帧rightDoorOpen{
从{
-webkit变换：透视（300）旋转（0度）；
-webkit转换源：0%0%；
}
到{
-webkit变换：透视（300）旋转（-90度）；
-webkit转换来源：100%0%；
}
}

您可以使用

-webkit动画填充模式：向前



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

   }
 }