html - CSS将文本旋转到垂直并从下到上滚动无限动画

Question

我想先像这样旋转文本，然后从下到上无限滚动，我已经检查了CSS animate scrolling text using text-indent 之类的答案，有人可以帮忙吗？提前致谢。

我发现英文字符的行为与writing-mode中文字符的行为不同。

 writing-mode: vertical-lr;

这是writing-mode汉字的行为。

更新

感谢@ulou，我更改了他发布的代码。最初的问题没有描述清楚。我删除了动画旋转 0 到旋转 90。

.container {
  width: 100%;
  height: 100vh;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
}

.cool-text {
  align-self: center;
  animation: 4s coolAnimation infinite;
  font-size: 100px;
  white-space: nowrap;
}

@keyframes coolAnimation {
  0% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(90deg) translateX(-100vh);
  }
}

<div class="container">
  <div class="cool-text">我來试一下效果怎么样&lt;/div>
</div>

我只需要从下到上的无限动画，下面是我的代码

动画。您会看到padding-left: 100vh，我还需要在新帧开始之前在前一帧中消失所有文本，例如循环文本或循环播放。

body {
  background: black;
}

.main-nav {
  color: white;
  font-size: 50vw;
  text-align: center;
  white-space: nowrap;
  height: 100vw;
  line-height: 100vw;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: left top;
  width: 100vh;
  padding-left: 100vh;
}

  <div class="main-nav">
    我来试试效果哈哈哈哈
  </div>

标签： htmlcssanimation

Answer 1

.container {
  width: 100%;
  height: 95vh;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
}

.cool-text {
  align-self: center;
  font-size: 100px;
  transform: rotate(90deg);
  animation: 6s coolAnimation infinite;
  animation-timing-function: linear;
  
  white-space: nowrap;
  width: 100%;
}

@keyframes coolAnimation {
  0% {
    transform: rotate(90deg) translateX(300vh);
  }
  100% {
    transform: rotate(90deg) translateX(-300vh);
  }
}

<div class="container">
  <div class="cool-text">Cool animated text</div>
</div>