Create a Marquee text scroller

Question

I need to create a marquee with CSS (or JavaScript). I have a code now but it cuts the text off and does not allow the whole phrase to be shown. I want it to look like the one on top here: https://www.balenciaga.com/us but without pause on hover (and without the pause button). I'm a designer and just a rookie coder so this is kind of a whole new world to me but I appreciate all the help I can get. The problem I have with my code is that it doesn't allow the whole text to be shown, neither is it infinite where the text is always visible. I want it to be on a loop and always visible like on the link above.

My code now:

.example1 {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.example1 h5 {
 font-size: 1em;
 color: black;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: example1 8s linear infinite;
 -webkit-animation: example1 8s linear infinite;
 animation: example1 8s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

<div class="example1">
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</h5>
</div>

Thanks in advance :)

Answer 1

After removing almost everything from your CSS and by adding just a couple of rules - there's the Marque scroller

.marquee {
  overflow: hidden;
}

.marquee > * {
  display: inline-block; /* added */
  white-space: nowrap;   /* added */
  padding-left: 100%;    /* added */
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

<div class="marquee">
  <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </h3>
</div>

your main issue was basically that the text wrapped at width 100%.

If you want to calculate the animationDuration dynamically (instead of hardcoding values like 20s in CSS) you might need a bit of JavaScript:

document.querySelectorAll(".marquee").forEach((el) => {
  const elChild = el.children[0];
  const width = elChild.getBoundingClientRect().width;
  const speed = +(el.dataset.speed || 100);
  // time = distance / speed
  elChild.style.animationDuration = (width / speed) + "s";
});

.marquee {
  overflow: hidden;
}

.marquee > * {
  display: inline-block; /* added */
  white-space: nowrap;   /* added */
  padding-left: 100%;    /* added */
  animation: marquee 0s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

<div class="marquee" data-speed="100">
  <h3>I have long text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
</div>
<div class="marquee" data-speed="100">
  <h3>I have some shorter text.</h3>
</div>
<div class="marquee" data-speed="200">
  <h3> I am fast!!!</h3>
</div>