如何使用CSS实现首段动画文本显示后再展示下一段文本

你可以通过拉长整体动画周期、为新增句子单独配置延迟触发的滑动显现动画实现需求，具体修改如下：

步骤1：修改HTML结构 #

在原有first-box容器末尾新增新句子的节点：

<div class="first-box">
  <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head"> We care about you</span>
  </div>
  <!-- 新增句子节点 -->
  <div class="intro intro3">
    <span class="sub-head2">We chose mental health because it matters</span>
  </div>
</div>

步骤2：修改CSS样式 #

核心做两处调整：一是把原有所有动画的总时长从7s调整为10s，给新句子留出展示时间；二是为新句子新增对应的显现、滑动动画，设置为等前两段文本完全展示后再启动：

/* The animation text*/
.intro {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.intro1 {
  animation: showup 10s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  color: fuchsia;
}

.intro2 {
  width: 0px;
  animation: reveal 10s infinite;
}

.sub-head {
  margin-left: -355px;
  animation: slidein 10s infinite;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

/* 新增第三行文本的样式 */
.intro3 {
  width: 0px;
  animation: revealNew 10s infinite;
  margin-left: 12px;
}

.sub-head2 {
  margin-left: -600px;
  animation: slideinNew 10s infinite;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 355px;
  }
}

/* 新增第三行文本的动画规则 */
@keyframes revealNew {
  0% {
    opacity: 0;
    width: 0px;
  }
  35% {
    opacity: 0;
    width: 0px;
  }
  45% {
    opacity: 1;
    width: 600px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 600px;
  }
}

@keyframes slideinNew {
  0% {
    margin-left: -600px;
  }
  35% {
    margin-left: -600px;
  }
  50% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

如果需要调整动画速度、文本间距，直接修改对应动画的百分比节点、宽度、margin数值即可。

内容的提问来源于stack exchange，提问作者monie