Help us understand the problem. What is going on with this article?

cssのみで作る自動無限スクロールスライド

同じスライドを2つ並べている。一つ目のスライドはスライドが画面に表示されている状態から、画面から消えるまでスクロールする。二つ目は画面の外(ギリギリ見えない状態)から、一つ目のスライドの最初の状態までスクロールする。二つのスライドをこのように動かすことで無限ループに見せている。

DEMO

See the Pen infinite scroll by mk668a (@mk668a) on CodePen.

CODE

index.html
<div class="infinity-slide">
<!--   同じスライドを二つ表示 -->
    <div id="slide">
      <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
    </div>
    <div id="slide">
      <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
    </div>
</div>
style.css
.infinity-slide{
  display: flex; /* 二つのスライドを横に並べる */
  width: 50vw;
  margin: 0 25vw;
  background: gray;
  overflow: hidden;
}

#slide {
  animation: infinity-loop 10s infinite linear 1s both; /* 無限ループアニメーションの設定 */
  display: flex; /* スライドの要素を横に並べる */
  width: 50vw;
  height: 100px;
  position: relative;
}

#slide img{
  height: 100%;
  width: auto
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
  from {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(-50vw);
  }
}

他にいい案があれば教えていただきたいですねええええ

mk668a
フロントエンドメインでやってます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away