html - 旋转多个，说7个字-CSS动画问题

我正在尝试使用CSS动画在一行中旋转7个单词。阅读几篇文章后，我可以轮换6个单词，但不能轮换7个单词。如何撰写超过7个字的CSS？请帮忙！以及如何以秒为单位计算时间？任何资料都会有所帮助！我在这个主题上停留了3天以上！

下面的代码可以正常使用6个单词，但是如果我输入另一个单词，则会出现重叠问题。

.d-title1 {
  text-indent: 0px;
  justify-content: center;
  text-align: center;
}
.d-title1 h2 {
  position: absolute;
  opacity: 0;
  left:0;
  overflow: hidden;
  -webkit-animation: rotateMyWord 18s linear infinite 0s;
  -ms-animation: rotateMyWord 18s linear infinite 0s;
  animation: rotateMyWord 18s linear infinite 0s;
}
.d-title1 h2:nth-child(2) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.d-title1 h2:nth-child(3) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.d-title1 h2:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
.d-title1 h2:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.d-title1 h2:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}

@-webkit-keyframes rotateMyWord {
  // For 6 words:
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateMyWord {
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rotateMyWord {
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

<div class="d-title1">
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize ">
          Word 1
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 2
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 3
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 4
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 5
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 6
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 7
  </h2>
 </div>

最佳答案

像这样？

您忘记添加.d-title1 h2:nth-child(7)然后更改

.d-title1 h2 {
  animation: rotateMyWord 21s linear infinite 0s;
}

添加到第7时达到21秒

.d-title1 {
  text-indent: 0px;
  justify-content: center;
  text-align: center;
}
.d-title1 h2 {
  position: absolute;
  opacity: 0;
  left:0;
  overflow: hidden;
  -webkit-animation: rotateMyWord 21s linear infinite 0s;
  -ms-animation: rotateMyWord 21s linear infinite 0s;
  animation: rotateMyWord 21s linear infinite 0s;
}
.d-title1 h2:nth-child(2) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.d-title1 h2:nth-child(3) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.d-title1 h2:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
.d-title1 h2:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.d-title1 h2:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}
.d-title1 h2:nth-child(7) {
  -webkit-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

@-webkit-keyframes rotateMyWord {
  // For 6 words:
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateMyWord {
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rotateMyWord {
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

<div class="d-title1">
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize ">
          Word 1
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 2
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 3
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 4
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 5
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 6
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 7
  </h2>
 </div>