Fold/Unfold animation

dabblet.css

/* Fold/Unfold animation*/
body {margin-top: 200px;}

@keyframes topfold {
  0%  {
    transform: rotateX(0deg);
    background-color: #FFF;
  }
  50%  {
    transform: rotateX(-90deg);
    background-color: #999;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    background-color: #FFF;
  }
}

@keyframes bottomfold {
  0% {
    transform: rotateX(0deg);
    background-color: #FFF;
  }
  50% {
    transform: translateY(-120px) translateZ(-120px) rotateX(90deg);
    background-color: #CCC;
  }
  100% {
    transform: rotateX(0deg);
    background-color: #FFF;
  }
}
@keyframes collapse_expand {
  0% {
    height: 240px;
  }
  50% {
    height: 0%;
  }
  100% {
    height: 240px;
  }
}

#stage {
  perspective: 400px;
  perspective-origin: 50% 0%;
  /*background: rgba(0,0,0,0.5);*/
}
#stage:hover{
  animation-name: collapse_expand;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}

p {
  background: #FFF;
  color: #333;
  margin: 0px;
  padding: 0px;
  height: 100px;
  font-family: HelveticaNeue-Light, Helvetica;
  font-size: 16px;
  font-weight: lighter;
  line-height: 20px;
  padding: 10px;
}

#stage:hover #topfold {
  transform-origin: 0% 0%;
  animation-name: topfold;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}   

#stage:hover #bottomfold {
  transform-origin: 0% 0%;
  animation-name: bottomfold;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}

dabblet.html

asdf
<div id="stage">
<p id="topfold">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis felis vulputate nibh rutrum sit amet vestibulum nulla vulputate. Donec turpis massa, iaculis quis eleifend sed, aliquam in augue. Vestibulum gravida suscipit velit, vel eleifend lorem posuere at. Nam accumsan est non sem consequat aliquam. Proin et enim ante, ut pretium arcu. Nullam non viverra velit. Etiam lobortis orci malesuada neque eleifend eleifend. Sed sit amet erat ipsum, at placerat tellus. 
</p>
<p id="bottomfold">
Phasellus id adipiscing odio.Sed a leo nec sem fringilla eleifend in varius libero. Nam elementum risus eu metus auctor rutrum. Curabitur eget est eget eros lacinia pretium. Suspendisse laoreet venenatis lorem, vel luctus lectus porttitor non. In condimentum venenatis blandit. In lacinia scelerisque velit luctus ultrices. In hac habitasse platea dictumst. Sed sed eleifend neque.
</p>
</div>
asdf

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}