Javascript 单独使用CSS是否可以实现这种旋转文本效果？

我遇到了一个动画，我认为它在我的一个网站上可能很有用。我在博客平台overblog上看到了它，特别是在这个页面：

我所指的动画一个接一个地在许多单词（或小短语）之间旋转，然后在所有短语循环之后重置回开始

我对CSS不太感兴趣，所以我想知道这是否仅仅是使用CSS完成的，或者它是否需要javascript的帮助

---

谢谢您的建议。

好的。。。我为你树立了一个榜样

基础很简单。你有一个固定的句子，在它之后，你有一列不同的文本。列具有固定高度，溢出：隐藏这样您就可以看到列表中的第一个单词了

然后创建一个动画，使用

translate3d

属性向上移动单词

这很容易，但需要一些时间才能找到正确的翻译百分比，从而使单词稍微停在正确的位置

开始：

0% { transform: translate3d(0, 0, 0);} 

我发现结束动画的正确百分比是（或多或少）：

我使用了

95%，100%

，所以这个词在重新开始之前会停一会儿

作为最后一个例子，我使用了：

35%, 40% { transform: translate3d(0, -320%, 0);} 

其中，

-320%

是（或多或少）第三个单词的位置

给你：

span{
显示：内联块；
垂直对齐：顶部；
高度：50px；
线高：50px；
}
.栏目{
显示：内联块；
垂直对齐：顶部；
高度：50px；
线高：50px；
溢出：隐藏；
}
保险商实验室{
边距：0；填充：0；
}
ulli{
边缘底部：30px；
}
.动画{
显示：块；
动画名称：动画；
动画持续时间：10秒；
动画迭代次数：无限；
动画计时功能：放松；
动画填充模式：正向；
}
@关键帧动画{
0%{transform:translate3d（0,0,0）；}
35%，40%{变换：translate3d（0，-320%，0）；}
85%，90%{变换：translate3D（0，-960%，0）；}
95%，100%{变换：translate3d（0，0，0）；}
}

这是一个句子

一个
两个
三个
四个
五个
六个
七

只需使用CSS即可完成。事实上，您的示例仅使用CSS完成。我会试着编一些代码来回答类似于或？

35%, 40% { transform: translate3d(0, -320%, 0);}