Animation 旋转单词动画&；持续时间

我正在轮换一些单词（为了一些语法规则），你们中的一些人已经很好地帮助我收紧了单词。不过，我想进一步加快动画/淡入淡出的速度，以避免单词相互重叠。还有，我怎样才能在不弄乱渐变的情况下再添加10个单词呢

这是我的 HTML:

男孩
看到
欲望
使用
发现
需要
尝试
爱
叶子
电话
作品
女孩。

还有CSS——我很难理解动画。我理解导致文字出现的延迟，但我不理解实际淡出的位置以及哪个部分是进入/退出的

    ./*/
    ROTATING WORDS
    /*/

.rw-words{
    display: inline;
    text-indent: 10px;
}

#girlWord {
  margin-left: 4em;  /* <-- Add space for the animated words  */
}
.rw-words span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: auto;
    color: #0f269e;
}
.rw-words-1 span{
    -webkit-animation: rotateWordsFirst 20s linear infinite 0s;
    -ms-animation: rotateWordsFirst 20s linear infinite 0s;
    animation: rotateWordsFirst 20s linear infinite 0s;
}
}
.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
    -ms-animation-delay: 0s; 
    animation-delay: 0s; 
    color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
    -ms-animation-delay: 2s; 
    animation-delay: 2s; 
    color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
    -ms-animation-delay: 4s; 
    animation-delay: 4s; 
    color: #0f269e; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
    -ms-animation-delay: 8s; 
    animation-delay: 8s; 
    color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
    -ms-animation-delay: 10s; 
    animation-delay: 10s; 
    color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #0f269e;
}

.rw-words span:nth-child(8) { 
    -webkit-animation-delay: 14s; 
    -ms-animation-delay: 14s; 
    animation-delay: 14s; 
    color: #0f269e;
}
.rw-words span:nth-child(9) { 
    -webkit-animation-delay: 16s; 
    -ms-animation-delay: 16s; 
    animation-delay: 16s; 
    color: #0f269e;
}
.rw-words span:nth-child(10) { 
    -webkit-animation-delay: 18s; 
    -ms-animation-delay: 18s; 
    animation-delay: 18s; 
    color: #0f269e;
}
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: linear; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 0; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@media screen and (max-width: 768px){
    .rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px)

/*/
轮换词
/*/
.rw单词{
显示：内联；
文本缩进：10px；
}
#吉尔沃德{
左边距：4em；/*我不是专家，但我相信您可以继续添加这些内容，并像上面那样将每个内容增加2。有兴趣了解其他人是否有一些输入。这部分可以通过将它们放在一起进行压缩，现在您可以看到动画淡入/淡出的发生位置：

/*enter code here*/
.rw-words span:nth-child(# ...) { 



/*enter code here*/
@keyframes rotateWords {
  0% {
    opacity: 0 ;
  }
  8% {
    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;
  }
  19% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

你对
javascript
和/或
JQuery
感觉如何？我并不总是理解它，但我不介意使用它。
/*enter code here*/
.rw-words span:nth-child(# ...) { 



/*enter code here*/
@keyframes rotateWords {
  0% {
    opacity: 0 ;
  }
  8% {
    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;
  }
  19% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}