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

Question

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

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

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

任何建议表示赞赏。

Answer 1

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

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

然后你创建一个动画来使用translate3d属性向上移动单词。

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

开始：

0% { transform: translate3d(0, 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, 0);} 
  35%, 40% { transform: translate3d(0, -320%, 0);} 
   85%,90% { transform: translate3D(0, -960%, 0);}
  95%, 100% { transform: translate3d(0, 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>

找到合适的位置来停止每个单词。

已编辑：我对@9​​87654330@ 进行了一些更改，以使单词返回到您的示例中的原点