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

Question

我正在尝试使用 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>

Answer 1

像这样？

你忘了加.d-title1 h2:nth-child(7)然后改

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

添加第 7 次后为 21s

.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>