CSSだけで左から右の無限スクロールを実装したサンプル

<div class="container">
  <div class="scroll-parent">
    <div class="scroll-child">
      <div>🍣</div>
      <div>🍱</div>
      <div>🍔</div>
      <div>🍟</div>
      <div>🧋</div>
    </div>
    <div class="scroll-child">
      <div>🍣</div>
      <div>🍱</div>
      <div>🍔</div>
      <div>🍟</div>
      <div>🧋</div>
    </div>
  </div>
</div>

.container {
  overflow: hidden;
  width: 100%;
  height: 70px;
}

.scroll-parent {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: inherit;
}

.scroll-child {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  right: 0%;
  top: 0%;
  width: inherit;
  height: inherit;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll-child:nth-child(1) {
  animation-name: first;
}

.scroll-child:nth-child(2) {
  animation-name: second;
}

.scroll-child > div {
  font-size: 70px;
}

@media screen and (max-width: 480px) {
  .scroll-child > div {
    font-size: 35px;
  }
}

@keyframes first {
  from {
    right: 0%;
  }
  to {
    right: -100%;
  }
}

@keyframes second {
  from {
    right: 100%;
  }
  to {
    right: 0%;
  }
}

元記事を表示する