CSS - Animation repeat after last nth-child animation ends - css

Question

I need when last child (yellow square) animation ends, it starts on red square again.
I tried make for each square different animation, but that didn't work properly.
Also i tried to make infinite animation, but i want to make animation where first square translate to scale down, then up, then second square translate to scale down, then up, etc..., but with infinite animation it won't work even if i make higher delays.
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper,
.lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1) {
background: #e03318;
/* RED */
}
.upper:nth-child(2) {
background: #0daa34;
/* GREEN */
}
.lower:nth-child(1) {
background: #1662dd;
/* BLUE */
}
.lower:nth-child(2) {
background: #d1b608;
/* YELLOW */
}
.upper:nth-child(1) {
animation-delay: .5s;
}
.upper:nth-child(2) {
animation-delay: 1s;
}
.lower:nth-child(1) {
animation-delay: 1.5s;
}
.lower:nth-child(2) {
animation-delay: 2s;
}
#-webkit-keyframes scale {
50% {
transform: scale(0.2);
}
100% {
transform: scale(1);
}
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>

Answer 1

This can be done with different animations for each rectangle:
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper, .lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1){
background: #e03318; /* RED */
}
.upper:nth-child(2){
background: #0daa34; /* GREEN */
}
.lower:nth-child(1){
background: #1662dd; /* BLUE */
}
.lower:nth-child(2){
background: #d1b608; /* YELLOW */
}
.upper:nth-child(1) {
animation: scale-1 2s infinite;
}
.upper:nth-child(2) {
animation: scale-2 2s infinite;
}
.lower:nth-child(1) {
animation: scale-3 2s infinite;
}
.lower:nth-child(2) {
animation: scale-4 2s infinite;
}
#-webkit-keyframes scale {
50% { transform: scale(0.2); }
100% { transform: scale(1); }
}
#keyframes scale-1 {
0% { transform: scale(1); }
12.5% { transform: scale(0.2); }
25% { transform: scale(1); }
}
#keyframes scale-2 {
25% { transform: scale(1); }
37.5% { transform: scale(0.2); }
50% { transform: scale(1); }
}
#keyframes scale-3 {
50% { transform: scale(1); }
62.5% { transform: scale(0.2); }
75% { transform: scale(1); }
}
#keyframes scale-4 {
75% { transform: scale(1); }
87.5% { transform: scale(0.2); }
100% { transform: scale(1); }
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>