旋转文字动画和持续时间

Question

我正在轮换一些单词（对于一些语法规则），你们中的一些人已经很好地帮助我收紧了事情。但是，我想进一步加快动画/淡入淡出，以避免单词相互重叠。另外，我将如何在不弄乱淡入淡出的情况下再添加 10 个单词？

这是我的 HTML：

<span>The boy
        <div class="rw-words rw-words-1">
            <span>see<b>s</b></span>
            <span>want<b>s</b></span>
            <span>use<b>s</b></span>
            <span>find<b>s</b></span>
            <span>need<b>s</b></span>
            <span>trie<b>s</b></span>
            <span>love<b>s</b></span>
            <span>leave<b>s</b></span>
            <span>call<b>s</b></span>
            <span>work<b>s</b></span>
        </div><span id="girlWord">the girl.</span><br><br>

还有 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)

这里是 jsfiddle。

https://jsfiddle.net/rh98fsom/

Answer 1

我不是专家，但我相信您可以继续添加这些，并像上面一样将每个增加 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;
  }
}