コニファ・ロゴ

csstest:[CSS] CSSだけで、ページめくりアニメーションをする本型プリローダー

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

 

 

戻るボタン