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

如何解决单独使用 CSS 是否可以实现这种旋转文字效果？

我发现了一个动画，我认为它可能对我的网站有用。我在博客平台 overblog 上看到的，特别是在这个页面上：https://en.over-blog.com/signup。

我所指的动画会一个接一个地循环播放多个单词（或小短语），然后在循环完所有短语后重新回到开头。

我对 CSS 并不擅长，所以想知道这是否可能仅使用 CSS 完成，或者是否需要 javascript 的帮助。

感谢任何建议。

解决方法

好的...我已经为你做了一个例子

基础很简单。你有一个固定的句子，在它之后，你有一个包含不同文本的列。该列的高度固定为 overflow:hidden;，因此您只能看到列表中的第一个单词。

然后您创建动画以使用 translate3d 属性向上移动单词。

这很容易，但您需要一些时间才能找到合适的翻译百分比，以将单词停在正确的位置。

开始：

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

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

95%,100% { transform: translate3D(0,-960%,0);}

我用过 95%,100% 所以这个词停了一会儿再开始

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

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

其中 -320% 是（或多或少）第三个词的位置。

这里有：

span {
  display:inline-block;
  vertical-align:top;
  height:50px;
  line-height:50px;
}
.column {
  display:inline-block;
  vertical-align:top;
  height:50px;
  line-height:50px;
  overflow:hidden;
}
ul {
  margin:0; padding:0;
  }
ul li {
  margin-bottom:30px;
  }
.animation {
  display:block;
  animation-name: animation;
  animation-duration: 10s;
  animation-iteration-count:infinite ;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes animation {
  0% { transform: translate3d(0,0);} 
  35%,0);} 
   85%,90% { transform: translate3D(0,0);}
  95%,100% { transform: translate3d(0,0);} 
}

<div>
  <span>This is a sentence</span>
  <div class="column" style="color:red;">
    <ul>
      <li class="animation" style="color:red;">one</li>
      <li class="animation" style="color:blue;">two</li>
      <li class="animation" style="color:green;">three</li>
      <li class="animation" style="color:red;">four</li>
      <li class="animation" style="color:blue;">five</li>
      <li class="animation" style="color:green;">six</li>
      <li class="animation" style="color:red;">seven</li>
    </ul>
  </div>
</div>

找到合适的位置停止每一个字。

已编辑：我对 snippet 进行了一些更改，以使单词像您的示例一样返回原点