stopping the css animation process

Question

first of all sorry for my English. I am new in css. i have given this effect to text. i just want to stop this animation once its done for all the sentences, there are 6 sentences with 3sec delay between each two,after last sentence completion i want to display all sentences together and wants to keep as it is,but it will again start animation from first sentence.how can i stop this? please help me if anyone knows.thanks in advance.this is my css code

.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

That is due to infinite in animation inside .rw-words-1 span.Just remove that and it works fine.

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