I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop. As someone relatively new to CSS animations, I find myself unsure of how to achieve this continuous loop seamlessly. It seems like I may have approached the setup incorrectly from the start. How can I reconstruct the animation so that all four lines continue to cycle endlessly?
Any suggestions or hints would be greatly appreciated!
PS: For those who prefer to dive into the code, I've included the snippet below and a link to the Fiddle here: https://codepen.io/SchweizerSchoggi/pen/xxKXyyv
PS2: I noticed a similar question posted by another user five years ago, but unfortunately, it went unanswered. This prompted me to pose my query today on this platform, where I was fortunate enough to receive helpful guidance.
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>