CSS3 animation make a stop delay between frames - html

Question

I'm trying to animate my logo using css, what I want is each logo fade in from top then stop in a certain point, then fade out to bottom, but couldn't make this, is this possible?
.logo {
width: 50px;
height: 50px;
background: whitesmoke;
transform: rotate(45deg);
position: absolute;
border-radius: 5px;
border: 2px solid white;
}
#logo {
width: 500px;
height: 500px;
margin: auto;
margin-top: 100px;
position: relative;
}
#logo-1 {
top: 0px;
animation: loading3 4s linear infinite normal;
}
#logo-2 {
top: -10px;
animation: loading2 3s linear infinite normal;
}
#logo-3 {
top: -20px;
animation: loading1 2s linear infinite normal;
}
#keyframes loading1 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: -20px;}
75% {background:#f44;opacity: 1;top: -20px;}
100% {background: white;opacity: 0;top: 50px;}
}
#keyframes loading2 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: -10px;}
75% {background:#f44;opacity: 1;top: -10px;}
100% {background: white;opacity: 0;top: 50px;}
}
#keyframes loading3 {
0% {background: white;opacity: 0;top: -120px;}
50% {background:#f44;opacity: 1;top: -50px;}
65% {background:#f44;opacity: 1;top: 0px;}
75% {background:#f44;opacity: 1;top: 0px;}
100% {background: white;opacity: 0;top: 50px;}
}
<div id="logo">
<div class="logo" id="logo-1"></div>
<div class="logo" id="logo-2"></div>
<div class="logo" id="logo-3"></div>
</div>
Note: logo-3 should come first and stop, then logo-2 come and stop,
then logo-1 come and stop then logo-3 should go first, then logo-2
then logo-1, one by one.
Original logo is:

Answer 1

There is no way to stop a CSS animation in-between and then continue, hence i have used little JavaScript.
What we do is, we divide all three animations into two portions, the first one for all three runs and then the second one. I have divided animations and then activate those animations using classes with JavaScript. This solution is not complex, it's just lengthy.
function animateLogo() {
logo1 = document.getElementById('logo-1');
logo2 = document.getElementById('logo-2');
logo3 = document.getElementById('logo-3');
if(logo1.classList.contains('anim31')) {
logo1.classList.remove('anim31');
logo1.classList.add('anim32');
} else {
logo1.classList.add('anim31');
logo1.classList.remove('anim32');
}
if(logo2.classList.contains('anim21')) {
logo2.classList.remove('anim21');
logo2.classList.add('anim22');
} else {
logo2.classList.add('anim21');
logo2.classList.remove('anim22');
}
if(logo3.classList.contains('anim11')) {
logo3.classList.remove('anim11');
logo3.classList.add('anim12');
} else {
logo3.classList.add('anim11');
logo3.classList.remove('anim12');
}
}
setInterval(animateLogo, 3000); // The time is the amount of milliseconds our longest animation will take i.e 3s
.logo {
width: 50px;
height: 50px;
background: whitesmoke;
transform: rotate(45deg);
position: absolute;
border-radius: 5px;
border: 2px solid white;
}
#logo {
width: 500px;
height: 500px;
margin: auto;
margin-top: 100px;
position: relative;
}
#logo-1 {
top: 0px;
}
#logo-1.anim31 {
animation: loading31 3s linear forwards normal;
}
#logo-1.anim32 {
animation: loading32 1s linear forwards normal;
}
#keyframes loading31 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: 0px;
}
}
#keyframes loading32 {
0% {
background: #f44;
opacity: 1;
top: 0px;
}
65% {
background: #f44;
opacity: 1;
top: 0px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
#logo-2 {
top: -10px;
}
#logo-2.anim21 {
animation: loading21 2s linear forwards normal;
}
#logo-2.anim22 {
animation: loading22 2s linear forwards normal;
}
#keyframes loading21 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: -10px;
}
}
#keyframes loading22 {
0% {
background: #f44;
opacity: 1;
top: -10px;
}
65% {
background: #f44;
opacity: 1;
top: -10px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
#logo-3 {
top: -20px;
}
#logo-3.anim11 {
animation: loading11 1s linear forwards normal;
}
#logo-3.anim12 {
animation: loading12 3s linear forwards normal;
}
#keyframes loading11 {
0% {
background: white;
opacity: 0;
top: -120px;
}
65% {
background: #f44;
opacity: 1;
top: -50px;
}
75% {
top: -50px;
}
100% {
background: #f44;
opacity: 1;
top: -20px;
}
}
#keyframes loading12 {
0% {
background: #f44;
opacity: 1;
top: -20px;
}
65% {
background: #f44;
opacity: 1;
top: -20px;
}
100% {
background: white;
opacity: 0;
top: 50px;
}
}
<body>
<div id="logo">
<div class="logo anim31" id="logo-1"></div>
<div class="logo anim21" id="logo-2"></div>
<div class="logo anim11" id="logo-3"></div>
</div>
</body>
I hope this is the expected result. If not, please comment below and i will edit the answer.
P.S: Play around with the timing of animations to make it faster/slower.