.wrapper {
	width:200px;
	margin:20px auto;
	}
.book {
  box-sizing: border-box;
  height: 100px;
  width: 150px;
  background: #fff;
  border: 4px solid #00a3b6;
  border-radius: 4px;
  position: relative;
}
.book__page {
  position: absolute;
  height: 100%;
  width: calc(50% - 2px);
  background: #fff;
  top: -4px;
  right: -4px;
  border: inherit;
  border-radius: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0 0 0;
          transform-origin: 0 0 0;
  -webkit-animation: page-flip 4s linear infinite;
          animation: page-flip 4s linear infinite;
}
.book__page__fill {
  background: #00a3b6;
  width: 80%;
  border: inherit;
  margin: 0 auto;
  border-width: 3px;
  border-radius: inherit;
  box-sizing: border-box;
  margin-top: 10px;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-animation: fill-1 4s linear forwards infinite;
          animation: fill-1 4s linear forwards infinite;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.book__page__fill:nth-child(2) {
  -webkit-animation-name: fill-2;
          animation-name: fill-2;
}
.book__page__fill:nth-child(3) {
  -webkit-animation-name: fill-3;
          animation-name: fill-3;
}
.book__page__fill:nth-child(4) {
  -webkit-animation-name: fill-4;
          animation-name: fill-4;
}
.book__page__fill:nth-child(5) {
  -webkit-animation-name: fill-5;
          animation-name: fill-5;
}

@-webkit-keyframes page-flip {
  50% {
    -webkit-transform: rotateY(0) translateX(0) skewY(0deg);
            transform: rotateY(0) translateX(0) skewY(0deg);
  }
  65% {
    -webkit-transform: rotateY(-90deg) translateX(-2px) skewY(-20deg);
            transform: rotateY(-90deg) translateX(-2px) skewY(-20deg);
  }
  80%, 100% {
    -webkit-transform: rotateY(-180deg) translateX(-4px) skewY(0deg);
            transform: rotateY(-180deg) translateX(-4px) skewY(0deg);
  }
}

@keyframes page-flip {
  50% {
    -webkit-transform: rotateY(0) translateX(0) skewY(0deg);
            transform: rotateY(0) translateX(0) skewY(0deg);
  }
  65% {
    -webkit-transform: rotateY(-90deg) translateX(-2px) skewY(-20deg);
            transform: rotateY(-90deg) translateX(-2px) skewY(-20deg);
  }
  80%, 100% {
    -webkit-transform: rotateY(-180deg) translateX(-4px) skewY(0deg);
            transform: rotateY(-180deg) translateX(-4px) skewY(0deg);
  }
}
@-webkit-keyframes fill-1 {
  10%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes fill-1 {
  10%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes fill-2 {
  10% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  20%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes fill-2 {
  10% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  20%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes fill-3 {
  20% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  30%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes fill-3 {
  20% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  30%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes fill-4 {
  30% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  40%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes fill-4 {
  30% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  40%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes fill-5 {
  40% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes fill-5 {
  40% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}