スライドが流れ続ける無限スライダーをHTMLとCSSのみで作成する方法を徹底解説します！

<div class="infinite__list">
	<div class="infinite__item">
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
	</div>
	<div class="infinite__item">
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
		<div class="infinite__img">
			<img src="" alt="スライド" width="300" height="300">
		</div>
	</div>
</div>

.infinite__list {
    position: relative;
    overflow: hidden; /* はみ出ないように指定 */
}
.infinite__list::before { /* スライダー領域の高さを確保し、レスポンシブ対応をするために擬似要素を使用 */
    content: "";
    display: block;
}
.infinite__item {
    display: flex; /* 横一列に並べる */
    width: 100%;
    position: absolute; /* absoluteにしないと動かない */
    top: 0;
    left: 0;
}
.infinite__item:nth-of-type(1) {
    animation: infinity01 20s infinite linear;
}
.infinite__item:nth-of-type(2) {
    animation: infinity02 20s infinite linear;
}
.infinite__img {
    position: relative;
    margin-right: 3%;
    flex-shrink: 0; /* スライド幅が縮まないように指定 */
}
.infinite__img::before { /* 画像をレスポンシブ対応にするために擬似要素を使用 */
    content: "";
    display: block;
    padding-top: 100%; /* スライドの縦横比を1:1にする */
}
.infinite__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@media screen and (min-width: 768px) {
    .infinite__list::before {
        padding-top: 30%;
    }
    .infinite__img {
        width: 30%;
    }
    @keyframes infinity01 {
        from {
            left: 0;
        }
        to {
            left: -297%;
        }
    }
    @keyframes infinity02 {
        from {
            left: 297%;
        }
        to {
            left: 0%;
        }
    }
}

@media screen and (max-width: 767px) {
    .infinite__list::before {
        padding-top: 45%;
    }
    .infinite__img {
        width: 45%;
    }
    @keyframes infinity01 {
        from {
            left: 0;
        }
        to {
            left: -432%;
        }
    }
    @keyframes infinity02 {
        from {
            left: 432%;
        }
        to {
            left: 0%;
        }
    }
}

.infinite__img {
    position: relative;
    margin-right: 3%;
    flex-shrink: 0;
}
@media screen and (min-width: 768px) {
    .infinite__img {
        width: 30%;
    }
    @keyframes infinity01 {
        from {
            left: 0;
        }
        to {
            left: -297%; /* 297%という中途半端な数値についての解説は後述 */
        }
    }
    @keyframes infinity02 {
        from {
            left: 297%; /* 1セット目のスライドのtoのleftのマイナスを外した数値を指定 */
        }
        to {
            left: 0;
        }
    }
}

@media screen and (max-width: 767px) {
    .infinite__img {
        width: 45%;
    }
    @keyframes infinity01 {
        from {
            left: 0;
        }
        to {
            left: -432%; /* 432%という中途半端な数値についての解説は後述 */
        }
    }
    @keyframes infinity02 {
        from {
            left: 432%;
        }
        to {
            left: 0;
        }
    }
}

.infinite__list {
    position: relative;
    overflow: hidden;
}
.infinite__list::before {
    content: "";
    display: block;
}
@media screen and (min-width: 768px) {
    .infinite__list::before {
        padding-top: 30%;
    }
    .infinite__img {
        width: 30%;
    }
}

@media screen and (max-width: 767px) {
    .infinite__list::before {
        padding-top: 45%;
    }
    .infinite__img {
        width: 45%;
    }
}