CSS-only text marquee

1
<div class="marquee-text">
2
  <div class="marquee-text-track">
3
    <p>JavaScript</p>
4
    <p>TypeScript</p>
5
    <p>CSS</p>
6
    <p>TailwindCSS</p>
7
    <p>Accessibility</p>
8
    <p>React</p>
9
    <p>Angular</p>
10
    <p aria-hidden="true">JavaScript</p>
11
    <p aria-hidden="true">TypeScript</p>
12
    <p aria-hidden="true">CSS</p>
13
    <p aria-hidden="true">TailwindCSS</p>
14
    <p aria-hidden="true">Accessibility</p>
15
    <p aria-hidden="true">React</p>
16
    <p aria-hidden="true">Angular</p>
17
  </div>
18
</div>

1
.marquee-text {
2
  overflow: clip;
3
}
4

5
.marquee-text-track {
6
  display: flex;
7
  padding-left: 4.8rem;
8
  gap: 4.8rem;
9
  width: max-content;
10
  animation: marquee-move-text var(--speed, 10s) linear infinite var(
11
      --direction,
12
      forwards
13
    );
14
}
15

16
.marquee-text p {
17
  border: 1px solid white;
18
  background-color: #141414;
19
  border-radius: 999px;
20
  padding: 1rem 2.5rem;
21
}
22

23
@keyframes marquee-move-text {
24
  to {
25
    transform: translateX(-50%);
26
  }
27
}