css - 重复多个 css 动画

Question

我为 4 行文本创建了一个文本淡入淡出动画。这些线条接连出现，到目前为止，这很好。现在要求对所有这些动画进行无限循环。由于我对 css 动画很陌生，所以我真的不知道如何处理这个问题。我想我可能把整件事都设置错了。但是如何重建它，以便我拥有所有 4 行的无限动画？

感谢任何提示!

PS:我附上了代码片段，这里还有 Fiddle 供那些喜欢它的人使用: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: 动画时长/没有。元素数 = 动画延迟

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>