marquee remade in css animations

For the dark times when <marquee> would stop working.

Keep in mind that the .marquee-copy element needs to have the exact same content as .marquee

You can customize the css variables for further control (i marked then in CSS)

you can set the timing function to steps(80) or other amount for a more authentic look.

HTML

<div class="marquee-container">
  <div class="marquee">
    this is a marquee
  </div>
  <div aria-hidden="true" class="marquee marquee-copy">
  this is a marquee
  </div>
</div>

CSS

/* marquee in css by scarecat */
@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.marquee-container {
  overflow: hidden;
  display: grid;
  width: 100%;
  align-items: center;
  grid-template-areas: "center";
  --speed-to-loop: 10s;
  --timing-function: linear;
  --gap: 10px;
}
.marquee {
  animation: marquee var(--speed-to-loop) var(--timing-function) infinite;
  width: max-content;
  min-width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  grid-area: center;
  padding-right: var(--gap);
}
.marquee-copy {
  animation-delay: calc(var(--speed-to-loop) / -2); 
}