How to make multiple elements and multiple animations animate infinitely with CSS - html

Question

I need to animate this CSS animation infinitely. I added the animation-iteration-count: infinite;. But it didn't work.
What I need to do to animate this infinitely?
.pre-loader-area {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
opacity: 1;
}
.pre-loader {
width: 20vw;
height: 20vw;
margin-left: auto;
margin-right: auto;
transform: translateY(40vh);
}
.pre-loader-block-line1,
.pre-loader-block-line2 {
position: relative;
width: 20vw;
height: 9vw;
}
.pre-loader-block-line2 {
position: relative;
top: 2.5vw;
}
.pre-loader-blocks {
position: relative;
float: left;
background-color: rgba(255, 255, 255, 0.8);
width: 41%;
height: 90%;
}
.block2,
.block4 {
float: right;
}
.block1 {
animation: scale-up 1s, scale-down 1s 1s, stay 6s 2s;
animation-iteration-count: infinite;
}
.block2 {
animation: scale-up 1s 1s, scale-down 1s 2s, stay 6s 3s;
animation-iteration-count: infinite;
}
.block4 {
animation: scale-up 1s 2s, scale-down 1s 3s, stay 6s 4s;
animation-iteration-count: infinite;
}
.block3 {
animation: scale-up 1s 3s, scale-down 1s 4s, stay 6s 5s;
animation-iteration-count: infinite;
}
#keyframes scale-up {
0% {
scale: 1;
}
100% {
scale: 1.2;
}
}
#keyframes scale-down {
0% {
scale: 1.2;
}
100% {
scale: 1;
}
}
#keyframes stay {
0% {
scale: 1;
}
100% {
scale: 1;
}
}
<div class="pre-loader-area">
<div class="pre-loader">
<div class="pre-loader-block-line1">
<div class="block1 pre-loader-blocks"></div>
<div class="block2 pre-loader-blocks"></div>
</div>
<div class="pre-loader-block-line2">
<div class="block3 pre-loader-blocks"></div>
<div class="block4 pre-loader-blocks"></div>
</div>
</div>
</div>

Answer 1

I think your best option would be to a single animation which you use for each of the blocks. You can then set the animtion for each block with a different delay (with will make a difference just for the 1st time the animation plays)
I have created a little snippet to help illustrate what i mean
.pre-loader-area {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
opacity: 1;
}
.pre-loader {
width: 20vw;
height: 20vw;
margin-left: auto;
margin-right: auto;
transform: translateY(40vh);
}
.pre-loader-block-line1,
.pre-loader-block-line2 {
position: relative;
width: 20vw;
height: 9vw;
}
.pre-loader-block-line2 {
position: relative;
top: 2.5vw;
}
.pre-loader-blocks {
position: relative;
float: left;
background-color: rgba(255, 255, 255, 0.8);
width: 41%;
height: 90%;
}
.block2,
.block4 {
float: right;
}
.block1 {
animation: blockAnimation 4s infinite 0s;
}
.block2 {
animation: blockAnimation 4s infinite 1s;
}
.block3 {
animation: blockAnimation 4s infinite 3s;
}
.block4 {
animation: blockAnimation 4s infinite 2s;
}
#keyframes blockAnimation {
0% {
scale: 1;
}
20% {
scale: 1.2;
}
40% {
scale: 1;
}
100% {
scale: 1;
}
}
<div class="pre-loader-area">
<div class="pre-loader">
<div class="pre-loader-block-line1">
<div class="block1 pre-loader-blocks"></div>
<div class="block2 pre-loader-blocks"></div>
</div>
<div class="pre-loader-block-line2">
<div class="block3 pre-loader-blocks"></div>
<div class="block4 pre-loader-blocks"></div>
</div>
</div>
</div>

Answer 2

Looking at the timings and delays you have set it seems to want each square to expand for one second, contract for one second and then hang around doing nothing for 6 seconds.
The overall time of a complete cycle is therefore 8 seconds.
You can create one set of keyframes which scales the element up for 1/8th of the iteration duration, scales it down for a further 1/8th and then does nothing for 6/8ths.
#keyframes scale {
0%, 25%, 100% { scale: 1; }
12.5% {scale: 1.2; }
}
This animation and the duration of 8s is the same for each block.
Each block then has its own delay. 0s for the first one, 1 for the second one and so on as you already have.
.pre-loader-area {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
opacity: 1;
}
.pre-loader {
width: 20vw;
height: 20vw;
margin-left: auto;
margin-right: auto;
transform: translateY(40vh);
}
.pre-loader-block-line1,
.pre-loader-block-line2 {
position: relative;
width: 20vw;
height: 9vw;
}
.pre-loader-block-line2 {
position: relative;
top: 2.5vw;
}
.pre-loader-blocks {
position: relative;
float: left;
background-color: rgba(255, 255, 255, 0.8);
width: 41%;
height: 90%;
animation: scale 8s var(--delay) infinite;
}
.block2,
.block4 {
float: right;
}
.block1 {
--delay: 0s;
}
.block2 {
--delay: 1s;
}
.block4 {
--delay: 3s;
}
.block3 {
--delay: 2s;
}
#keyframes scale {
0%,
25%,
100% {
scale: 1;
}
12.5% {
scale: 1.2;
}
}
#keyframes scale-up {
0% {
scale: 1;
}
100% {
scale: 1.2;
}
}
#keyframes scale-down {
0% {
scale: 1.2;
}
100% {
scale: 1;
}
}
#keyframes stay {
0% {
scale: 1;
}
100% {
scale: 1;
}
}
<div class="pre-loader-area">
<div class="pre-loader">
<div class="pre-loader-block-line1">
<div class="block1 pre-loader-blocks"></div>
<div class="block2 pre-loader-blocks"></div>
</div>
<div class="pre-loader-block-line2">
<div class="block3 pre-loader-blocks"></div>
<div class="block4 pre-loader-blocks"></div>
</div>
</div>
</div>