Open Folder

by WILLIAM CORREA

HTML

<div class="folder">  
  <div class="front"></div>
</div>

CSS

body {
  padding: 10px;
}
.folder {
  perspective: 1000px;
  position: relative;
  width: 160px;
  height: 90px;
  transition: .2s;
  border: 1px solid rgb(199, 199, 199);
  background-color: #e2e2e2;
}
.front {
  transition: all .3s;
  width: 160px;
  margin: 5px 0 0 0;
  height: 84px;
  background-color: #e2e2e2;
  transform: rotate(0);
  border: 1px solid rgba(199, 199, 199, 1);
}
.folder:hover .front {
  position: absolute;
  transform: rotatex(-20deg);
  transform-origin: 0 105%;
  transform: rotateX(0deg);
  animation: unfold .3s linear 0s forwards;
}
@keyframes unfold {
  0% {
    transform: rotateX(0deg);
  }
  86% {
    transform: rotateX(-30deg);
  }
  87% {
    transform: rotateX(-31deg);
  }
  88% {
    transform: rotateX(-32deg);
  }
  89% {
    transform: rotateX(-33deg);
  }
  90% {
    transform: rotateX(-34deg);
  }
  91% {
    transform: rotateX(-35deg);
  }
  92% {
    transform: rotateX(-34deg);
  }
  93% {
    transform: rotateX(-33deg);
  }
  94% {
    transform: rotateX(-32deg);
  }
  95% {
    transform: rotateX(-31deg);
  }
  100% {
    transform: rotateX(-30deg);
  }
}