How to scroll text in a banner

[Elindo]

I am looking to move text from right to left (as you facing the screen).

BUT… Is there a way for the text to overflow all the way to right, outside of the div not showing on the browser? and scroll all the way to the left and disappear from the browser? AND… is there a way to make it behave the same way on phone screens and computer screens?

The problem right now is that the text initial starting point is its normal left side positioning, instead of starting to scroll all the way from the right… and the other problem is that in smaller screens the text gets group together in 2-3 lines rather than scrolling in a single line.

The CSS I am using is this:

.banner{
  overflow-x:hidden ;
  overflow-y:hidden ;

}


.banner-text {
position:absolute;
  font-size: 20px;
  animation: bannermove 10s linear infinite;

}

@keyframes bannermove{

  100%{
    transform: translatex(50%);
  }

  100%{
    transform: translatex(-100%);
  }

This is the html:

<div class="banner">
          <h6 class="banner-text">
            Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | Hello | 
          </h6>
        </div>

And this is the codepen:

QWqQgxj

[HawksSpawn]

Hi @Elindo,
for this problem:

that in smaller screens the text gets group together in 2-3 lines rather than scrolling in a single line.

you can use width in banner-text class.

[Elindo]

Thanks! that worked…

I also change the @keyframes setting and everything works fine…

Thanks!