Вращающиеся слова анимации и длительности - PullRequest
Новая
       72

Вращающиеся слова анимации и длительности

0 голосов
/ 26 января 2020

Я вращаю некоторые слова (для некоторых правил грамматики), и некоторые из вас уже хорошо помогли мне все исправить. Однако я бы хотел еще больше ускорить анимацию / затухание, чтобы слова не перекрывали друг друга. Кроме того, как бы я go о добавлении еще 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/

...