CODEWITHSUNDEEP
htmlcssanimation
lin
lin

Reputation: 1589

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

I want to rotate text like this first, and then scroll bottom to top infinitely, I have checked answers like CSS animate scrolling text using text-indent, anyone who can help? Thanks in advance.

enter image description here

What I found was that the behavior of the writing-mode of the English characters is different from that of the Chinese characters.

 writing-mode: vertical-lr;

Here is the behavior of the writing-mode of the Chinese characters. enter image description here

Update

Thanks to @ulou, I changed the code he posted. The original question did not describe clearly. I removed the animation 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>

I just need the infinite animation from bottom to top, below is my code without

animation. You see there is padding-left: 100vh, also I need all the text to disappear in the previous frame before the new frame begins, something like loop text or circular playing.

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>

Upvotes: 0

Views: 1827

Answers (1)

ulou
ulou

Reputation: 5863

.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>

Upvotes: 1

Related Questions