CSSのみで無限スクロール

<div class="slider-wrapper">
<ul class="slider">
<li class="slide"><img src="/img/slide01.webp" alt="" /></li>
<li class="slide"><img src="/img/slide02.webp" alt="" /></li>
<li class="slide"><img src="/img/slide03.webp" alt="" /></li>
<li class="slide"><img src="/img/slide04.webp" alt="" /></li>
<li class="slide"><img src="/img/slide05.webp" alt="" /></li>
<li class="slide"><img src="/img/slide06.webp" alt="" /></li>
</ul>
<ul class="slider">
<li class="slide"><img src="/img/slide01.webp" alt="" /></li>
<li class="slide"><img src="/img/slide02.webp" alt="" /></li>
<li class="slide"><img src="/img/slide03.webp" alt="" /></li>
<li class="slide"><img src="/img/slide04.webp" alt="" /></li>
<li class="slide"><img src="/img/slide05.webp" alt="" /></li>
<li class="slide"><img src="/img/slide06.webp" alt="" /></li>
</ul>
</div>

/* スライダー全体 */
.slider-wrapper {
display: flex; /* スライドのグループを横並び */
overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
animation: scroll-left 60s infinite linear .5s both;  /*scroll-left 60sが非道毒度数字を小さくすると早くなる*/
display: flex; /* スライドを横並び */
}
/* スライド */
.slide {
width: calc(100vw / 6); /* 画面に表示される画像の枚数 */
}
/* スライドの画像 */
.slide img {
display: block;
width: 100%;
}
/* CSSアニメーション */
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}