翻页动画效果

Question

我需要书页转动画效果加载画面。我创造了一个回合我需要不断转动如何使书像装载。

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

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

＆＃13;

＆＃13;

.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;
}
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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