CODEWITHSUNDEEP
htmlcsscss-animationskeyframe
user2785628
user2785628

Reputation:

css animation white-space: nowrap;

I'm working on doing a css animation that would make text start at the right side of the screen, go to the left, the wrap back around and repeat.

I have some pretty large letters so I'm doing 

white-space: nowrap;

so the text does not go down to another line.

I got the animation scrolling fine with 

0% {
    transform: translateX(5%)
}
100% {
    transform: translateX(-100%)
}

and I put 

animation: animation-name 5s infinite;
animation-timing-function: linear;

in the class

Only problem I have is that the with the big letters and the white-space: nowrap is causing the page width to increase in size because the letters are pushing the page width. Is there a way around this so that the animation will still scroll but not push the page width?

enter image description here

example picture above.

Upvotes: 1

Views: 2412

Answers (1)

Mr Lister
Mr Lister

Reputation: 46589

Just put overflow-x: hidden in the class's parent.

body {
  overflow-x: hidden;
}

div {
  font-size: 150px;
  white-space: nowrap;
  animation: animation-name 5s infinite;
  animation-timing-function: linear;
}

@keyframes animation-name {
  0% {
    transform: translateX(5%)
  }
  100% {
    transform: translateX(-100%)
  }
}
<div>
  Some pretty large letters
</div>

Upvotes: 1

Related Questions