CODEWITHSUNDEEP
csscss-animations
JonSnow
JonSnow

Reputation: 335

Repeat multiple css animations

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>

Upvotes: 2

Views: 2608

Answers (1)

Varsha Dhadge
Varsha Dhadge

Reputation: 1751

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>

Upvotes: 7

Related Questions