.boxes
.box
.sides
.back L
.front L
.box
.sides
.back O
.front O
.box
.sides
.back A
.front A
.box
.sides
.back D
.front D
.box
.sides
.back I
.front I
.box
.sides
.back N
.front N
.box
.sides
.back G
.front G
.box
.sides
.back .
.front .
.box
.sides
.back .
.front .
.box
.sides
.back .
.front .
View Compiled
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Oswald);
$rad: 6px;
body {
font-family: 'Oswald';
position: absolute;
height: 100%;
width: 100%;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
background: #111;
.boxes {
display: flex;
align-items: center;
justify-content: center;
.box {
box-sizing: border-box;
height: 60px;
width: 40px;
.sides {
position: relative;
width: 100%;
height: 100%;
//perspective: 200;
div {
position: absolute;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 36px;
width: 40px;
}
.front {
background-color: #ee451a;
backface-visibility: hidden;
animation: flip 1.5s linear infinite;
}
.back {
background-color: #176d97;
//background-color: #85260f;
color: rgba(255,255,255,.5);
animation: flip 1.5s linear infinite;
}
}
&:first-child .sides div {
border-radius: $rad 0 0 $rad;
}
&:last-child .sides div {
border-radius: 0 $rad $rad 0;
}
}
}
}
@for $i from 1 through 10 {
.boxes .box:nth-child(#{$i}) .sides div {
animation-delay: $i * 30ms;
}
}
@keyframes flip {
0% { transform: rotateX(360deg); }
20% { transform: rotateX(360deg); }
50% { transform: rotateX(180deg); }
80% { transform: rotateX(0deg); }
100% { transform: rotateX(0deg); }
}
View Compiled
/*
Having fun with loading animations. Use it if you like it :)
*/
This Pen doesn't use any external CSS resources.