重复多个CSS动画

Question

我为4行文本创建了一个文本淡入淡出动画。线条接连出现，到目前为止，还可以。现在，要求对所有这些动画进行无限循环。因为我对CSS动画还很陌生，所以我真的不知道该如何处理。我想我可能将整个事情设置错了。但是如何重建它，使我拥有所有4行的无限动画？

感谢您的提示！

PS：我附上代码片段，这也是那些喜欢的小提琴手：https : //codepen.io/SchweizerSchoggi/pen/xxKXyyv

PS2：我的问题与5年前另一位用户提出的另一个问题接近或相似，但是那个没有得到答案。这就是为什么我在这里和今天问我的问题。至少我得到了一个有帮助的答案。

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

怎么运行的？

1：Animation duration/ no. of elements=animation delay

2：您需要根据需要调整关键帧动画（可能有所不同）。您需要对每个要素的时间外观和时空有直觉。

3：并添加animation-iteration-count: infinite;到您的个人元素。

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>