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

Question

我想先这样旋转文本，然后从下到上无限滚动，我已经检查了这样的答案，谁能帮忙？提前致谢。

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

 writing-mode: vertical-lr;

这里是汉字writing-mode的行为。

更新

感谢@ulou，我更改了他发布的代码。原问题没有描述清楚。我去掉了动画rotate 0 to rotate 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">我來试一下效果怎么样</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>

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>

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

CSS rotate text to vertical and scroll bottom to top infinite animation

html

css

animation

更新