停止css动画过程

Question

首先抱歉我的英语。我是css的新手。我已将此效果赋予文字。     我只是想在完成所有句子后停止这个动画，     在最后一句完成之后，每两个之间有6个句子，延迟3秒     我希望将所有句子一起显示并希望保持原样，但它会再次显示      从第一句开始动画。我可以阻止这个吗？      如果有人知道，请帮帮我。谢谢。这是我的css代码

＆＃13;

＆＃13;

.rw-words-1 span{
  font-size: 150%;
  line-height: 120%;
  -webkit-animation: rotateWordsFirst 18s linear infinite 0s;
  -ms-animation: rotateWordsFirst 18s linear infinite 0s;
  animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
}
.rw-words span:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
  -webkit-animation-delay: 9s; 
  -ms-animation-delay: 9s; 
  animation-delay: 9s; 
}
.rw-words span:nth-child(5) { 
  -webkit-animation-delay: 12s; 
  -ms-animation-delay: 12s; 
  animation-delay: 12s; 
}
.rw-words span:nth-child(6) { 
  -webkit-animation-delay: 15s; 
  -ms-animation-delay: 15s; 
  animation-delay: 15s; 
}
@-webkit-keyframes rotateWordsFirst {
  0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
  5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
  0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 0px;}
  5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
  0% { opacity: 0;   animation-timing-function: ease-in; width: 0px;}
  5% { opacity: 1;   animation-timing-function: ease-out; width: 100%;}
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

＆＃13;

<section class="rw-wrapper">
  <h2 class="rw-sentence">
    <div class="rw-words rw-words-1">
        <span>beautiful websites</span>
        <span>interesting apps</span>
        <span>impactful identities</span>
        <span>working strategies</span>
        <span>incredible gadgets</span>
        <span>intelligent systems</span>
    </div>
  </h2>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是由infinite animation内的.rw-words-1 span引起的。只需删除它即可。

.rw-words-1 span{
  font-size: 150%;
  line-height: 120%;
  -webkit-animation: rotateWordsFirst 18s linear;
  -ms-animation: rotateWordsFirst 18s linear;
  animation: rotateWordsFirst 18s linear;
}
.rw-words span:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
}
.rw-words span:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
  -webkit-animation-delay: 9s; 
  -ms-animation-delay: 9s; 
  animation-delay: 9s; 
}
.rw-words span:nth-child(5) { 
  -webkit-animation-delay: 12s; 
  -ms-animation-delay: 12s; 
  animation-delay: 12s; 
}
.rw-words span:nth-child(6) { 
  -webkit-animation-delay: 15s; 
  -ms-animation-delay: 15s; 
  animation-delay: 15s; 
}
@-webkit-keyframes rotateWordsFirst {
  0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
  5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
  0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 0px;}
  5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
  0% { opacity: 0;   animation-timing-function: ease-in; width: 0px;}
  5% { opacity: 1;   animation-timing-function: ease-out; width: 100%;}
  17% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

<section class="rw-wrapper">
  <h2 class="rw-sentence">
    <div class="rw-words rw-words-1">
        <span>beautiful websites</span>
        <span>interesting apps</span>
        <span>impactful identities</span>
        <span>working strategies</span>
        <span>incredible gadgets</span>
        <span>intelligent systems</span>
    </div>
  </h2>
</section>