CSS動畫 - 初始頁面加載時顯示的所有旋轉字

Question

我已經玩了幾個小時，我似乎無法弄清楚爲什麼當頁面初始加載時，所有單詞顯示.....然後它開始旋轉像正常。有人能幫我弄清楚這一點嗎？

編輯 ---它看起來像第一個和最後一個字加載最初。

編輯 ---我更新了片段，因爲我忘記了第（6）個孩子。所以現在它不會把第一個和最後一個字放在一起，但是時間稍微偏離了一點。

編輯 ---得到它工作奶油光滑！更新下面的代碼片段以幫助任何可能需要它的人。

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
 
h2{ 
 
font-family: 'Open Sans', sans-serif; 
 
text-rendering: optimizelegibility; 
 
font-weight:400; 
 
font-size:35px; 
 
line-height:45px; 
 
color: #333; 
 
letter-spacing: -2px; 
 
} 
 
.text-center { 
 
    text-align: center!important; 
 
} 
 
.rw-words-more { 
 
    margin-left: 210px; 
 
} 
 
.rw-words { 
 
    display: inline; 
 
} 
 
.rw-words-1 span { 
 
    animation: rotateWord 18s linear infinite 0s; 
 
    -ms-animation: rotateWord 18s linear infinite 0s; 
 
    -webkit-animation: rotateWord 18s linear infinite 0s; 
 
    color: #00abe9; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 200px; 
 
    padding-right: 2px; 
 
    text-align: right; 
 
} 
 
.rw-words-1 span:nth-child(2){ 
 
    animation-delay: 3s; 
 
    -ms-animation-delay: 3s; 
 
    -webkit-animation-delay: 3s; 
 
} 
 
.rw-words-1 span:nth-child(3){ 
 
    animation-delay: 6s; 
 
    -ms-animation-delay: 6s; 
 
    -webkit-animation-delay: 6s; 
 
} 
 
.rw-words-1 span:nth-child(4){ 
 
    animation-delay: 9s; 
 
    -ms-animation-delay: 9s; 
 
    -webkit-animation-delay: 9s; 
 
} 
 
.rw-words-1 span:nth-child(5){ 
 
    animation-delay: 12s; 
 
    -ms-animation-delay: 12s; 
 
    -webkit-animation-delay: 12s; 
 
} 
 
.rw-words-1 span:nth-child(6){ 
 
    animation-delay: 15s; 
 
    -ms-animation-delay: 15s; 
 
    -webkit-animation-delay: 15s; 
 
} 
 

 
/*topToBottom Animation*/ 
 
@keyframes rotateWord{ 
 
0%, 100%, 80% { 
 
    opacity: 0; 
 
} 
 
2% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-30px); 
 
    transform: translateY(-30px); 
 
} 
 
17%, 5% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
} 
 
20% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(30px); 
 
    transform: translateY(30px); 
 
} 
 
} 
 
/*END*/

<h2 class="text-center hidden-sm hidden-xs"> 
 
<span class="rw-words rw-words-1"> 
 
<span>Experience</span> 
 
<span>Dedication</span> 
 
<span>Knowledge</span> 
 
<span>Perception</span> 
 
<span>Innovation</span> 
 
<span>Customers</span> 
 
</span> 
 
<span class="rw-words-more">Matters, that's why we've been <strong>in business for 10+ years!</strong></span> 
 
</h2>

Answer 1

你不佔6個字。第一個塊更改爲：

.rw-words-1 span { 
    animation: rotateWord 15s linear infinite 0s; 
    -ms-animation: rotateWord 15s linear infinite 0s; 
    -webkit-animation: rotateWord 15s linear infinite 0s; 
    color: #00abe9; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    width: 200px; 
    padding-right: 2px; 
    text-align: right; 
} 

地址：

.rw-words-1 span:nth-child(6){ 
    animation-delay: 12.5s; 
    -ms-animation-delay: 12.5s; 
    -webkit-animation-delay: 12.5s; 
}