如何在CSS

Question

我有一个<div>填充了<span>个淡入淡出的元素。在最后一个出现之后，它会保持太长并且在第二次迭代中与第一个碰撞。在任何时候，文本都不应重叠/相互融合。使它成为15秒会导致文本相互渗透转向过渡。

我能改变什么才能使它们全部流畅？

.wrapper {
  width: 377px;
  margin: auto;
}

span {
  width: 300px;
  position: absolute;
  left: calc(50% - 121px);
  font-size: 24px;
  line-height: 26.4px;
  text-align: center;
  color: red;
  opacity: 0;
  overflow: hidden;
  animation: fadeEffect 12s linear infinite 0s;
}

span:nth-child(2) {
  animation-delay: 3s;
}

span:nth-child(3) {
  animation-delay: 6s;
}

span:nth-child(4) {
  animation-delay: 9s;
}

span:nth-child(5) {
  animation-delay: 12s;
}

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    transform: translateY(0px);
  }
  10% {
    opacity: 1;
    transform: translateY(0px);
  }
  25% {
    opacity: 1;
    transform: translateY(0px);
  }
  30% {
    opacity: 0;
    transform: translateY(0px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<div class="wrapper">
  <div class="sentences">
    <span>the quick brown fox</span>
    <span>jumps over the lazy dog</span>
    <span>on the way to the market</span>
    <span>to get some food</span>
    <span>for his good friend</span>
  </div>
</div>

View on JSFiddle (with SCSS)

Answer 1

你只需要增加动画长度，这样它就不会在最后一个完成之前从头开始

  animation: fadeEffect 15s linear infinite 0s;