Html CSS动画-初始页面加载时显示所有旋转单词

我已经玩了几个小时了，我似乎不明白为什么当页面最初加载时，所有的单词都会显示。。。。。然后它开始像平常一样旋转。有人能帮我弄清楚吗

编辑——它看起来像最初加载的第一个和最后一个单词

编辑——我更新了片段，因为我忘记了第（6）个孩子。所以现在它没有把第一个和最后一个字放在一起，但是时间有点不合适

编辑——让它工作得非常顺利！更新了下面的代码片段，以帮助可能需要它的任何人

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
氢{
字体系列：“开放式Sans”，无衬线；
文本呈现：优化易读性；
字体大小：400；
字体大小：35px；
线高：45px；
颜色：#333；
字母间距：-2px；
}
.文本中心{
文本对齐：居中！重要；
}
.rw单词更多{
左边距：210像素；
}
.rw单词{
显示：内联；
}
.rw-words-1 span{
动画：rotateWord 18s线性无限0s；
-ms动画：rotateWord 18s线性无限0s；
-webkit动画：rotateWord 18s线性无限0s；
颜色：#00abe9；
不透明度：0；
溢出：隐藏；
位置：绝对位置；
宽度：200px；
右侧填充：2px；
文本对齐：右对齐；
}
.rw-words-1跨度：第n个孩子（2）{
动画延迟：3s；
-ms动画延迟：3s；
-webkit动画延迟：3s；
}
.rw-words-1跨度：第n个孩子（3）{
动画延迟：6秒；
-ms动画延迟：6s；
-webkit动画延迟：6s；
}
.rw-words-1跨度：第n个孩子（4）{
动画延迟：9秒；
-毫秒动画延迟：9秒；
-webkit动画延迟：9秒；
}
.rw-words-1跨度：第n个孩子（5）{
动画延迟：12秒；
-ms动画延迟：12s；
-webkit动画延迟：12秒；
}
.rw-words-1跨度：第n个孩子（6）{
动画延迟：15秒；
-毫秒动画延迟：15秒；
-webkit动画延迟：15秒；
}
/*topToBottom动画*/
@关键帧旋转方向{
0%, 100%, 80% {
不透明度：0；
}
2% {
不透明度：0；
-webkit转换：translateY（-30px）；
转换：translateY（-30px）；
}
17%, 5% {
不透明度：1；
-webkit转换：translateY（0）；
变换：translateY（0）；
}
20% {
不透明度：0；
-webkit转换：translateY（30px）；
变换：translateY（30px）；
}
}
/*结束*/

经验
奉献
知识
知觉
创造
客户
重要的是，这就是为什么我们在业务上已经超过10年了

你没有解释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;
}

加：

---

我一定是瞎了。忘记了最后一个孩子（6），我更新了上面的代码片段，但是当你点击运行代码片段时，动画现在似乎关闭了。我想我得把握时机了。谢谢

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