html - 翻页动画效果

我需要翻动动画效果加载屏幕的书页。我创建了一个转弯，我需要连续转弯如何使书本像装书一样。

我要实现此页面翻书效果。
用于加载屏幕。

翻一页后需要添加新的翻页

.cssload-thecube {
  width: 96px;
  height: 69px;
  margin: 0 auto;
  margin-top: 49px;
  position: relative;
  background-color: #000;
}
.cssload {
  width: 73px;
  height: 73px;
  margin: 0 auto;
  margin-top: 49px;
  position: relative;
  background-color: rgb(43,160,199);
}
.cssload-thecube .cssload-cube {
  position: relative;

}
.cssload-thecube .cssload-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
  content: "";
  position: absolute;
  top: -36px;
  left: 15px;
  width: 100%;
  height: 100%;
  background-color: rgb(43,160,199);
  animation: cssload-fold-thecube 2.76s infinite linear both;
  -o-animation: cssload-fold-thecube 2.76s infinite linear both;
  -ms-animation: cssload-fold-thecube 2.76s infinite linear both;
  -webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
  -moz-animation: cssload-fold-thecube 2.76s infinite linear both;
  transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
  transform: scale(1.1) rotateZ(90deg);
  -o-transform: scale(1.1) rotateZ(90deg);
  -ms-transform: scale(1.1) rotateZ(90deg);
  -webkit-transform: scale(1.1) rotateZ(90deg);
  -moz-transform: scale(1.1) rotateZ(90deg);
}

@keyframes cssload-fold-thecube {
 0%, 50% {
   transform: perspective(-180deg) rotateX(-136px);
   opacity: 0;
 }
50%,
 100% {
    transform: perspective(136px) rotateX(-180deg);
  opacity: 1;
}
  }

<div class="cssload-thecube">
  <div class="cssload-cube cssload-c2"></div>
</div>

最佳答案

@keyframes cssload-fold-thecube {
  0%, 50% {
    transform: perspective(-180deg) rotateX(-136px);
    opacity: 0;
  }
  50%,
  100% {
    transform: perspective(136px) rotateX(-180deg);
    opacity: 1;
  }
}