Repeat multiple css animations

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>

Possible duplicate of How to have css3 animation to loop forever — Morpheus
– Morpheus, Commented Sep 3, 2019 at 13:16
Possible, yeah, at least it does look similiar. BUT that question got no correct answer. Hope to fare better with this one — JonSnow
– JonSnow, Commented Sep 3, 2019 at 13:23

Varsha Dhadge · Accepted Answer · 2019-09-03 13:51:49Z

7

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>

edited Sep 3, 2019 at 13:51

answered Sep 3, 2019 at 13:31

Varsha Dhadge

1,75115 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JonSnow Over a year ago

This is exactly the result I had hoped for. Thank you so much for your help! But unfortunatly I still do not really understand how it works... can you explain a bit more in detail please?

Keith Over a year ago

Animation-duration is the entire length of one animation. The animation-delay is when it comes in/out. Then the keyframes of the entire animation sets when the animations ( in your case ) fade in and out.

Varsha Dhadge Over a year ago

@JonSnow tried adding few lines of explanation hope this will clear your doubt.

Collectives™ on Stack Overflow

Repeat multiple css animations

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related