In this article, we’re going to take a look at some css animation basics. How it works, what it is, and then we’ll create a simple css loading animation, similar to facebook’s chat loading animation. In a previous article, I’ve showcased 5 Animations Using CSS Keyframes and you seem to liked it, so I thought I’d go into how to actually create these animations.
Altho in this tutorial we’ll create a loading animation, the bounce, fade and other animations all relay on the same method.
What are CSS @keyframes?
CSS @keyframes is a rule that let’s authors control the intermediate steps in a css animations sequence by establishing keyframes, aka way points. Imagine it as a timeline, and with these keyeframes we tell the object where it should be and how it should look when at certain points on the time line. Here’s an example:
@keyframes move {
0% {
bottom: 10px;
}
50% {
bottom: 90px;
}
100% {
bottom: 10px;
}
}
In the above code block, we have a set of keyframes, called “move”. At the beginning, the object we put this set on, will be 10px away from the bottom, then at 50% will be at 90px away, and at 100% it’ll go back to 10px again. In this example we have only 3 keyframes, but you can add as many as you want. They must go as follows: ” 0% {} 10 {} etc etc ” ( the % can be any from 0 to 100% ), and in between the { } you place your css properties.
Read more about css keyframes here
Creating a basic CSS Loader
Okay, now that we have a basic idea on what these keyframes are, let’s create our css loader.
First, we need to the HTML structure, that should look like the following:
<div class="container"> <span class="dot dot-one"></span> <span class="dot dot-two"></span> <span class="dot dot-three"></span> </div>
Then, we give it a basic style:
.container {
position: relative;
display: block;
width: 220px;
height: 130px;
padding: 10px;
border-radius: 30px;
border: 5px solid #27ae60;
background-color: #3498db;
}
.dot {
position: absolute;
display: inline-block;
height: 50px;
width: 50px;
border-radius: 25px;
background-color: #2c3e50;
margin: 0 10px 0 10px;
bottom: 10px;
}
.dot-two {
margin-left: 85px;
}
.dot-three {
margin-left: 160px;
}
In the code above, we style the container as a box, and position the 3 dots at the bottom, near each other.
Now let’s create the animation:
@keyframes move {
0% {
bottom: 10px;
}
50% {
bottom: 90px;
}
100% {
bottom: 10px;
}
}
As I explained it above, this will move the object we put this animation on, from 10-90px from the bottom.
Now that we have our animation, let’s apply them to the dots:
.dot-one {
animation-name: move;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-delay: 0;
}
.dot-two {
animation-name: move;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-delay: 0.2s;
}
.dot-three {
animation-name: move;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-delay: 0.4s;
}
This is pretty straightforward. We apply the animation “move” with a duration of 1 second, and make it loop infinitely. The timing function is ease-out, which means it’ll be slow at start, then speed up, and slow down again.
Then we add 0.2 second delay after each dot so they make a kind of weave effect.
And there you have it! The animation is done. Tho the timings aren’t perfect, but you get the idea how it should work. Here’s an other little animation that uses the same tactic, but with growing lines.
I hope you enjoyed this short article on css animation basics.