css-selectors - 旋转单词与动画延迟和页面上其他代码的问题

Question

我最近添加了一个旋转的单词封面......我似乎无法弄清楚如何让最后一个单词暂停（停止旋转）。我只是想让它在那里结束。我也有它在视频背景上，我的第一个词在视频上传之前开始旋转。最后，我上传了一个用于音频的 Elfsight 代码（太棒了），但这干扰了注入到标题页面的代码，所以现在旋转单词并不是全部旋转。我知道很多，但如果有人可以帮忙请

        /* Animated Text in the Header */
.rotating-container{
    position: relative !important;
    height: 200px;
}
.rotating-words {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: 100%;
   text-align: center;
}
.rotating-words h2{
  font-size: 10rem;
  color: white !important;
 font-family: 'Lobster', cursive;
  }
  .rotating-words p{
  font-size: 4rem;
  color: white !important;
 font-family: 'Lobster', cursive;
  }
.rotating-words:nth-child(1) { 
    opacity: 1 !important;  
}
.rotateWords{
  -webkit-animation: rotateWords 12s linear infinite 0s;
  -moz-animation: rotateWords 12s linear infinite 0s;
  -o-animation: rotateWords 12s linear infinite 0s;
  -ms-animation: rotateWords 12s linear infinite 0s; 
  animation: rotateWords 12s linear infinite 0s;
}

.rotating-words:nth-child(2) { 
    -webkit-animation-delay: 2s; 
    -moz-animation-delay: 2s; 
    -o-animation-delay: 2s; 
    -ms-animation-delay: 2s; 
  animation-delay: 2s; 
}
.rotating-words:nth-child(3) { 
    -webkit-animation-delay: 4s; 
    -moz-animation-delay: 4s; 
    -o-animation-delay: 4s; 
    -ms-animation-delay: 4s; 
  animation-delay: 4s; 
}
.rotating-words:nth-child(4) { 
        -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
  animation-delay: 6s;  
}
.rotating-words:nth-child(5) { 
        -webkit-animation-delay: 8s; 
    -moz-animation-delay: 8s; 
    -o-animation-delay: 8s; 
    -ms-animation-delay: 8s; 
  animation-delay: 8s;  
  }
.rotating-words:nth-child(6) {      
  -webkit-animation-delay: 12s; 
    -moz-animation-delay:  12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
  animation-delay: 12s; 
 animation: 12s; 
  }

@keyframes rotateWords {
  0% {
    opacity: 0 ;
  }
  5% {
    opacity: 1 ;
    -webkit-animation-timing-function: ease-in; 
    -moz-animation-timing-function: ease-in; 
    -o-animation-timing-function: ease-in; 
    -ms-animation-timing-function: ease-in; 
    animation-timing-function: ease-in;
  }
  15% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media only screen and (max-width: 640px) {
  .rotating-container{
    height: 140px;
}
  .rotating-words h2{
  font-size: 6rem;
  color: white !important;
  }
  
  .rotating-words p{
  font-size: 1rem;
  color: white !important;
  }
  }


      
        /*my page header html*/
    <div class="rotating-container">
  <div class="rotating-words">
    <h2>Natural</h2>
  </div>
    <div class="rotating-words">
      <h2>Rare</h2>
  </div>
    <div class="rotating-words">
      <h2>Exotic</h2>
  </div>
    <div class="rotating-words">
      <h2>Opulent</h2>
  </div>
    <div class="rotating-words">
      <h2>Barbie Ray's</h2>
      <p class="sqsrte-large">
        <strong>Luxury Jewelry Concierge</strong>
      </p>
  </div>
    </div>