CSS Flip Box Loading Animation

Hi friends, we did GIF images to create animations for may times. However, they aren’t much to be used over gradients or pictures (no alpha channel, no anti-aliasing) of which new websites are full. There are various workarounds to animate PNG images rather, But I want to show you a solution I discovered to create a “loading animation” from scratch using CSS, without images.

loading_model_9.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_9</title>
<style>
body{
 background-color:#7d1ad4;
}
.sa-folding-box{
 margin: 300px auto;
 width: 40px;
 height: 40px;
 position: relative;
 -webkit-transform: rotateZ(45deg);
 transform:rotateZ(45deg);
}
.sa-folding-box .sa-box{
 float: left;
 width: 50%;
 height: 50%;
 position: relative;
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}
.sa-folding-box .sa-box:before{
 content: '';
 position:absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #FFF;
 -webkit-animation: sa-foldboxAngle 2.4s infinite linear both;
 animation: sa-foldboxAngle 2.4s infinite linear both;
 -webkit-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 transform-origin: 100% 100%;
}
.sa-folding-box .sa-box_2{
 -webkit-transform:scale(1.1) rotateZ(90deg);
 transform:scale(1.1) rotateZ(90deg);
}
.sa-folding-box .sa-box_3{
 -webkit-transform:scale(1.1) rotateZ(180deg);
 transform:scale(1.1) rotateZ(180deg);
}
.sa-folding-box .sa-box_4{
 -webkit-transform:scale(1.1) rotateZ(270deg);
 transform:scale(1.1) rotateZ(270deg);
}
.sa-folding-box .sa-box_2:before{
 -webkit-animation-delay: 0.3s;
 animation-delay: 0.3s;
}
.sa-folding-box .sa-box_3:before{
 -webkit-animation-delay: 0.6s;
 animation-delay: 0.6s;
}
.sa-folding-box .sa-box_4:before{
 -webkit-animation-delay: 0.9s;
 animation-delay: 0.9s;
}
@keyframes sa-foldboxAngle{
 0%, 10%{
 -webkit-transform: perspective(140px) rotateX(-180deg);
 transform:perspective(140px) rotateX(-180deg);
 opacity: 0;
 }
 25%, 75%{
 -webkit-transform: perspective(140px) rotateX(0deg);
 transform:perspective(140px) rotateX(0deg);
 opacity:1;
 }
 90%, 100%{
 -webkit-transform:perspective(140px) rotateY(180deg);
 transform:perspective(140px) rotateY(180deg);
 opacity: 0;
 }
}
@-webkit-keyframes sa-foldboxAngle{
 0%, 10%{
 -webkit-transform: perspective(140px) rotateX(-180deg);
 transform:perspective(140px) rotateX(-180deg);
 opacity: 0;
 }
 25%, 75%{
 -webkit-transform: perspective(140px) rotateX(0deg);
 transform:perspective(140px) rotateX(0deg);
 opacity:1;
 }
 90%, 100%{
 -webkit-transform:perspective(140px) rotateY(180deg);
 transform:perspective(140px) rotateY(180deg);
 opacity: 0;
 }
}
</style>
</head>
<body>
<div class="sa-folding-box">
 <div class="sa-box_1 sa-box"></div>
 <div class="sa-box_2 sa-box"></div>
 <div class="sa-box_4 sa-box"></div>
 <div class="sa-box_3 sa-box"></div>
</div>
</body>
</html>

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply