停止css動畫過程

Question

首先感謝我的英語。我是新來的CSS。我已經把這個效果給了文字。 我只是想停止這個動畫，一旦它完成所有的句子， 有6個句子，每兩個之間3秒延遲，在最後一句完成後 我想顯示所有的句子，並希望保持原樣，但它將再次從第一句開始動畫 。我可以阻止這個嗎？ 請幫助我，如果有人在advance.this knows.thanks是我的CSS代碼

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

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

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>