CSSだけでテキストの無限スクロール

infinite-scroll.md

<div class="loop">
  <p aria-hidden="true">A Future of Smiles and Growth</p>
  <p aria-hidden="true">A Future of Smiles and Growth</p>
</div>

.loop {
  position: absolute;
  bottom: 9.375rem;
  gap: 8rem;
  width: 100%;
  white-space: nowrap;
  display: flex;
  z-index: -1;
}

.loop p {
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
  font-size: 10.25rem;
  opacity: 0.14;
  letter-spacing: -0.01em;
  line-height: 1.1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: loop 40s linear infinite;
}

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

@-moz-document url-prefix() {
  .loop {
    transform: translateZ(0);
  }
}