Rotate multiple, say 7 words - css animation issue

Question

I am trying to rotate 7 words in a line using css animations. After going through several articles I could rotate 6 words, but failed to rotate 7 words. How do I write the css for more than 7 words? Please help! And how to calculate the time in seconds? Any source will be helpful! I have stuck on this topic for more than 3 days!

Below code works fine with 6 words but it overlapping issue occurs if I enter another word.

.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

Like this?

You forgot to add .d-title1 h2:nth-child(7) and then change

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

to 21s when 7th is added

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