CSSだけで作られた、ページに書き込み、ページをめくる動作をアニメーションで繰り返す本型プリローダーです。
htmlソース
<div class="book">
<div class="book__page">
<div class="book__page__fill"></div>
<div class="book__page__fill"></div>
<div class="book__page__fill"></div>
<div class="book__page__fill"></div>
<div class="book__page__fill"></div>
</div>
</div>
CSSソース
.wrapper {
.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);
}
}
