Fold/Unfold animation

dabblet.css

/* Fold/Unfold animation
Now with gradients and expanding container!
*/
body { margin-top: 200px; }

@keyframes topfold {
  0%  {
    transform: rotateX(0deg);
  }
  50%  {
    transform: rotateX(-90deg);
    box-shadow: inset 0px 100px 100px #AAA;
  }
  100% {
    -webkit-transform: rotateX(0deg);
  }
}

@keyframes bottomfold {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: translateY(-120px) translateZ(-120px) rotateX(90deg);
    box-shadow: inset 0px 100px 100px #CCC;
  }
  100% {
    transform: rotateX(0deg);
  }
}
@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;
}

.fold {
  margin: 0px;
  height: 100px;
  padding: 10px;
  /*border: 1px dashed black;*/
}

p {
  color: #333;
  font-family: HelveticaNeue-Light, Helvetica;
  font-size: 16px;
  font-weight: lighter;
  line-height: 20px;
}

#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

<p> before</p>
<div id="stage">
<p id="topfold" class="fold">
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" class="fold">
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>
<p>after</p>

settings.json

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