accessible marquee

i wrote this for The & System. they were using a <marquee> tag on their website at the time for effect, but were looking for a replacement since <marquee> is deprecated and generally inaccessible.

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee div {
  padding-left: 100%;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee div:hover {
  animation-play-state: paused
}

.marquee p {
  display: inline;
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee div {
    overflow: scroll;
    padding-left: 0;
    width: auto;
    animation: none;
  }
}

add the marquee class to a div, add another div, and add your content. like this:

<div class="marquee">
    <div>
        <p>

and it will horizontally scroll in a loop. it will pause whenever the reader hovers over it, and if they have reduced motion on, it converts to simple horizontally-scrolling text. the speed is controlled by the variable --marquee-duration, so change the value until you get a speed you like.

see it in action below:

feel free to use this however you like. attribution is appreciated, but optional.