如何使用CSS旋转多个单词？

我正在尝试使用CSS和HTML制作单个单词的动画。我希望单词淡入，保持可见，然后淡出，然后，我想继续下一个单词

我遵循了本教程（），但问题是我无法理解如何在@keyframes动画中设置持续时间的百分比，因为在本教程中它刚刚编写：

我们的动画将运行一个周期，这意味着每个跨度将显示一次，持续三秒，因此为延迟值。整个动画将运行6（图像数量）*3（出现时间）=18秒。我们需要为不透明度值（或使跨度出现的任何值）设置正确的百分比。6除以18得到0.333…对于我们的关键帧步骤，这将是33%。我们希望在span上发生的一切都需要在那之前发生。因此，在调整并查看最适合的内容之后，我们为第一个单词制作了以下动画

在我的例子中，我的整个动画是16秒长（因为我有4个单词*4），所以4/16=0,25，这就是为什么所有事情都需要在25%之前发生

以下是我的动画代码：

@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); }
    5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);}
    17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); }
    20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

这是一个完整的演示：

.rw-words-1 span{
位置：绝对位置；
不透明度：0；
溢出：隐藏；
-webkit动画：rotateWord 16s线性无限0s；
-ms动画：旋转方向16s线性无限0s；
动画：rotateWord 16s线性无限0s；
}
.rw-words-1 span:n第n个孩子（2）{
-webkit动画延迟：4s；
-ms动画延迟：4s；
动画延迟：4s；
}
.rw-words-1 span:n第n个孩子（3）{
-webkit动画延迟：8s；
-ms动画延迟：8s；
动画延迟：8秒；
}
.rw-words-1 span:n第n个孩子（4）{
-webkit动画延迟：12秒；
-ms动画延迟：12s；
动画延迟：12秒；
}
@-webkit关键帧旋转方向{
0%{不透明度：0；}
2%{opacity:0；-webkit transform:translateX（0px）；}
5%{opacity:1；-webkit transform:translateX（0px）；}
17%{opacity:1；-webkit transform:translateX（0px）；}
20%{opacity:0；-webkit transform:translateX（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-ms关键帧旋转方向{
0%{不透明度：0；}
2%{不透明度：0；-ms变换：translateX（0px）；}
5%{不透明度：1；-ms变换：translateX（0px）；}
17%{不透明度：1；-ms变换：translateX（0px）；}
20%{不透明度：0；-ms变换：translateX（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@关键帧旋转方向{
0%{不透明度：0；}
2%{opacity:0；-webkit transform:translateX（0px）；transform:translateX（0px）；}
5%{opacity:1；-webkit transform:translateX（0px）；transform:translateX（0px）；}
17%{opacity:1；-webkit transform:translateX（0px）；transform:translateX（0px）；}
20%{opacity:0；-webkit transform:translateX（00px）；transform:translateX（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

单词1
单词2
单词3
单词4

如果动画要在前25%内完成，并且您不希望文字长时间完全透明，只需缩短不透明度为0的时间段即可。
在您的代码片段中，不透明度为0，从0%到2%，从20%到25%，总共1.12秒。我把它从24%改为25%，大约0.16秒

.rw-words-1 span{
位置：绝对位置；
不透明度：0；
溢出：隐藏；
-webkit动画：rotateWord 16s线性无限0s；
-ms动画：旋转方向16s线性无限0s；
动画：rotateWord 16s线性无限0s；
}
.rw-words-1 span:n第n个孩子（2）{
-webkit动画延迟：4s；
-ms动画延迟：4s；
动画延迟：4s；
}
.rw-words-1 span:n第n个孩子（3）{
-webkit动画延迟：8s；
-ms动画延迟：8s；
动画延迟：8秒；
}
.rw-words-1 span:n第n个孩子（4）{
-webkit动画延迟：12秒；
-ms动画延迟：12s；
动画延迟：12秒；
}
@-webkit关键帧旋转方向{
0%{opacity:0；-webkit transform:translateX（0px）；}
3%{opacity:1；-webkit transform:translateX（0px）；}
21%{opacity:1；-webkit transform:translateX（0px）；}
24%{opacity:0；-webkit transform:translateX（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-ms关键帧旋转方向{
0%{不透明度：0；-ms变换：translateX（0px）；}
3%{不透明度：1；-ms变换：translateX（0px）；}
21%{不透明度：1；-ms变换：translateX（0px）；}
24%{不透明度：0；-ms变换：translateX（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@关键帧旋转方向{
0%{opacity:0；-webkit transform:translateX（0px）；transform:translateX（0px）；}
3%{opacity:1；-webkit transform:translateX（0px）；transform:translateX（0px）；}
21%{opacity:1；-webkit transform:translateX（0px）；transform:translateX（0px）；}
24%{opacity:0；-webkit transform:translateX（00px）；transform:translateX（0px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

单词1
单词2
单词3
单词4

由于延迟，你的实际动画时间不是应该缩短吗？你想让单词在下一个出现之前保持可见吗？@TylerH不，我只想让单词之间的“空白”变短shorter@somethinghere你是说什么延误？谢谢，这就是我想要实现的，现在降低不透明度=0倍似乎是合乎逻辑的：）但是通过你的回答，我还有一个问题：你如何计算时间？我无法得到你得到的结果…你是说秒数？整个动画持续16秒，所以在你的源代码中，第一个单词将以20%的不透明度返回到0，或者在3.2秒后返回。下一个单词将在27%（2%加上4秒的延迟）或4.32秒后开始可见。这能解释事情吗？