CSS Animation Timing - css

Question

I'm having a hard time making this preloader animation in CSS.
This is what I'm trying to make.
What am I doing wrong?
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>

Answer 1

Use step-end:
animation: pulse .8s infinite step-end;
body{
padding-top: 40px; /* for demonstration purpose */
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite step-end;
animation-delay: .2s;
}
.m {
animation: pulse 2s infinite step-end;
animation-delay: .4s;
}
.r {
animation: pulse 2s infinite step-end;
animation-delay: .6s;
}
#keyframes pulse {
0% { transform: scale( 1 ); }
50% { transform: scale( 2 ); }
100% { transform: scale( 1 ); }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
JSFiddle
Now just adjust the animation duration and delay time to make it more like in the OP.
Update: use transform: scale() to make the circle expand from its centar - reference

Answer 2

I have extra frames to the animation. Check below answer.
html,
body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.5em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite linear;
}
.m {
animation: pulse 2s infinite linear;
animation-delay: .3s;
}
.r {
animation: pulse 2s infinite linear;
animation-delay: .6s;
}
#keyframes pulse {
10% {
transform: scale(1);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.7);
}
50% {
transform: scale(1.7);
}
70% {
transform: scale(1.7);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>