In this blog, I just want to try to develop some loading animations by using CSS3. Actually, when I was a freshman in college, I was so excited about loading animations for their beautiful and amazing effects. In that time, I haven't contacted with CSS3, so today I just want to realize this little dream.
First of all, let's see some effects:
I will implement this function step by step. First, let's make sure the framework. If we want to realize the first one, we need one container and five vertical bars.
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
</div>
And the CSS of container:
.container {
margin: 0 auto;
width: 50px;
height: 50px;
text-align: center;
font-size: 5px;
}
The finally thing is to set animations of vertical bars. Because we want the bars moving. And in order to reduce the number of codes, we can use the following method to set animations:
.container > div {
background-color: #67CF22;
height: 100%;
width: 5px;
display: inline-block;
-webkit-animation: animation 1.2s infinite ease-in-out;
animation: animation 1.2s infinite ease-in-out;
}
@-webkit-keyframes animation {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes animation {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
However, in this time, all the vertical bars will move together, but we want they can move one by one. So let's reduce their delay time individually.
.container>.bar2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container>.bar3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container>.bar4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container>.bar5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
Ok, everything is done. So let's see the effect. It's easy to achieve. Just think about it, and try to do it. You can finish every loading animation, please believe me, they are amazing.
(That's all)