<div class="itemVerticalLoopBox">
<div class="itemVerticalLoopBox__inner">
<ul>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
</ul>
<ul>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
</ul>
<!-- /.itemVerticalLoopBox__inner --></div>
<!-- /.itemVerticalLoopBox --></div>

.itemVerticalLoopBox{
width:15em;//スライドさせる幅
height:30em;//スライドさせる高さ
display: grid;
}
.itemVerticalLoopBox__inner{
width:100%;
display: flex;
flex-direction: column-reverse;
overflow: hidden;
}
.itemVerticalLoopBox__inner>ul{
width:100%;
display: flex;
flex-direction: column-reverse;
margin: 0;
padding: 0;
align-items: center;
animation: animeItemLoopVertical 40s infinite linear;
list-style: none;
}
.itemVerticalLoopBox__inner>li{
width: 100%;
}
.itemVerticalLoopBox__inner>li img{
width:100%;
height:auto;
}
.itemVerticalLoopBox__inner:hover>ul{
animation-play-state: paused;//ホバーで一時停止
}
@keyframes animeItemLoopVertical {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}

.itemVerticalLoopBox{
 width:15em;//スライドさせる幅
 height:30em;//スライドさせる高さ
 display: grid;
 &__inner{
  width:100%;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  &>ul{
   width:100%;
   display: flex;
   flex-direction: column-reverse;
   margin: 0;
   padding: 0;
   align-items: center;
   animation: animeItemLoopVertical 40s infinite linear;
   list-style: none;
   &>li{
    width: 100%;
    img{
     width:100%;
     height:auto;
    }
   }
  }
 }
 &:hover{
  &>ul{
   animation-play-state: paused;//ホバーで一時停止
  }
 }
}
@keyframes animeItemLoopVertical {
 0% {
  transform: translateY(0%);
 }
 100% {
  transform: translateY(100%);
 }
}

下から上にループさせるには、以下のようにアニメーションを逆にする。

@keyframes animeItemLoopVerticalReverse {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(0%);
}
}

横に無限ループさせる場合はこちら