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; 
}