<div class="marquee">
  <span>Hello World&nbsp;</span>
  <span>Hello World&nbsp;</span>
  <span>Hello World&nbsp;</span>
  <span>Hello World&nbsp;</span>
</div>

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

.marquee{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;

  span{
    text-transform: uppercase;
    will-change: transform;
    transform: translateX(0);
    white-space: nowrap;
    animation: marquee 24s linear infinite;
    
    // Extra Styling
    font-size: 200px;
    font-family: 'Gravitas One', Helvetica, Arial, sans-serif;
    font-weight: 900;
    color: #98C9FF;
  }
}


// Extra Styling
html{
  height: 100%;
}

body{
  background-color: #D2E7FF;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}