下から上へ無限ループするCSSアニメーション

<main>
	<section id="mv" class="mv">
		<div class="mv_wrap ">
			<ul class="grid mv_list mv_list-up">
				<li class="item0 mv_item sp_tb">
					<img src="./images/mv/mv0.jpg">
				</li>
				<li class="item1 mv_item">
					<img src="./images/mv/mv1.jpg">
				</li>
				<li class="item2 mv_item">
					<img src="./images/mv/mv2.jpg">
				</li>
				<!-- 省略 -->
				<li class="item9 mv_item">
					<img src="./images/mv/mv9.jpg">
				</li>
				<li class="item10 mv_item">
					<img src="./images/mv/mv10.jpg">
				</li>
			</ul>
			<ul class="grid mv_list mv_list-up">
				<li class="item11 mv_item">
					<img src="./images/mv/mv11.jpg">
				</li>
				<li class="item12 mv_item">
					<img src="./images/mv/mv12.jpg">
				</li>
				<!-- 省略 -->
				<li class="item18 mv_item">
					<img src="./images/mv/mv18.jpg">
				</li>
				<li class="item19 mv_item">
					<img src="./images/mv/mv19.jpg">
				</li>
				<li class="item20 mv_item">
					<img src="./images/mv/mv20.jpg">
				</li>
				<li class="item21 mv_item sp_tb">
					<img src="./images/mv/mv21.jpg">
				</li>
			</ul>
		</div>
	</section>
</main>

/*===================
  mv-grid
====================*/
.grid {
	display: grid;
	grid-template-columns: repeat(4, 4fr);
	grid-auto-rows: 320px;
	background-color: #fff;
}
	.grid > li {
		position: relative;
	}
		.grid > li img {
			position: absolute;
			left: 0;
			top: 0;
		}
.grid > li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
.grid > li:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
.grid > li:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}
.grid > li:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}
.grid > li:nth-child(5) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
.grid > li:nth-child(6) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 5;
}
.grid > li:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
}
.grid > li:nth-child(8) {
    grid-column: 4;
    grid-row: 3;
}
.grid > li:nth-child(9) {
    grid-column: 3;
    grid-row: 4;
}
.grid > li:nth-child(10) {
    grid-column: 4;
    grid-row: 4;
}

.mv {
	height: 100vh;
    overflow: hidden;
    position: relative;
}
.mv_wrap {
  overflow: hidden;
}
.mv_list-up{
	animation :infinity-scroll-up 50s infinite linear 0.5s both;
}
.mv_item > img{
   width: 100%;
}


/*下から上へ*/
@keyframes infinity-scroll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@media screen and (max-width:1440px) { 
.grid {
		grid-auto-rows: 140px;
	}
}

@media screen and (max-width:1024px) { 
.grid {
		grid-auto-rows: 86px;
	}
    .grid > li.mv_item:nth-child(11) {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 5;
        grid-row-end: 9;
    }
}

@media screen and (max-width:768px) { 
	.grid {
		display: grid;
		grid-template-columns: repeat(4, 2fr);
		grid-auto-rows: 70px;
		background-color: #fff;
	}
}

grid-auto-rows: ○○px;