Repeat multiple css animations - css

Question

I have created a text fadein-fadeout animation for 4 lines of text.
The lines appear one after another and so far, that's fine.
Now it's requested to to an infinite loop on all these animations.
As I am pretty new to css animations I really don't know how to handle this.
I guess I might have setup the whole thing wrong. But how can it be rebuilt, so that I have an infinite animation of all 4 lines?
Thanks for any hint!
PS: I attach the code snippet and here is the Fiddle as well for those, who prefer that: https://codepen.io/SchweizerSchoggi/pen/xxKXyyv
PS2: my question is close or similiar to another question asked 5 years ago by another user, but that one did not get an answer. That's why I asked MY question here and today. At least I got an answer that helped.
body {
font-size: 62.5%;
font-family: Arial;
}
.animation-box {
width: 75%;
height: 30rem;
background-color: darkblue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
45% {
opacity: 1;
}
100% {
opacity: 0%;
}
}
.animation-box h1 {
position: absolute;
left: 5%;
top: 0;
font-size: 4em;
color: white;
font-weight: 400;
}
.first-line,
.second-line,
.third-line,
.fourth-line {
font-size: 3em;
position: absolute;
left: 5%;
top: 20%;
opacity: 0;
color: rgba(200,200,200,0.9);
}
.first-line {
animation-name: fadeInOut;
animation-duration: 5s;
}
.second-line {
animation-name: fadeInOut;
animation-delay: 5s;
animation-duration: 5s;
}
.third-line {
animation-name: fadeInOut;
animation-delay: 10s;
animation-duration: 5s;
}
.fourth-line {
animation-name: fadeInOut;
animation-delay: 15s;
animation-duration: 5s;
}
<section class="animation-box">
<h1>Fading the lines</h1>
<div class="first-line">This is line 1</div>
<div class="second-line">here comes line 2</div>
<div class="third-line">3 is the perfect number</div>
<div class="fourth-line">the final one is 4</div>
</section>

Answer 1

How it works?
1: Animation duration / no. of elements = animation delay
2: You need to tweak keyframe animation as per your requirements(this may vary). You need have instinct on time appearance of your each element & time gap.
3: And add animation-iteration-count: infinite; to your individual element.
body {
font-size: 62.5%;
font-family: Arial;
}
.animation-box {
width: 75%;
height: 30rem;
background-color: darkblue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
2% {
opacity: 0;
}
5% {
opacity: 1;
}
17% {
opacity: 1;
}
19% {
opacity: 1;
}
24% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.animation-box h1 {
position: absolute;
left: 5%;
top: 0;
font-size: 4em;
color: white;
font-weight: 400;
}
.first-line,
.second-line,
.third-line,
.fourth-line {
font-size: 3em;
position: absolute;
left: 5%;
top: 20%;
opacity: 0;
color: rgba(200,200,200,0.9);
animation-name: fadeInOut;
animation-iteration-count: infinite;
}
.first-line {
animation-duration: 12s;
}
.second-line {
animation-delay: 3s;
animation-duration: 12s;
}
.third-line {
animation-delay: 6s;
animation-duration: 12s;
}
.fourth-line {
animation-delay: 9s;
animation-duration: 12s;
}
<section class="animation-box">
<h1>Fading the lines</h1>
<div class="first-line">This is line 1</div>
<div class="second-line">here comes line 2</div>
<div class="third-line">3 is the perfect number</div>
<div class="fourth-line">the final one is 4</div>
</section>