Поворот нескольких, скажем, 7 слов - css проблема с анимацией

Question

Я пытаюсь повернуть 7 слов в строке, используя css анимацию. Пройдя несколько статей, я смог повернуть 6 слов, но не смог повернуть 7 слов. Как мне написать css для более чем 7 слов? Пожалуйста помоги! А как рассчитать время в секундах? Любой источник будет полезен! Я застрял в этой топи c более чем на 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;
}

на 21 с при добавлении 7-го

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