html怎么实现滑动效果,我想问下怎么用css实现这个滚动效果

moveUp

@keyframes scroll {

0% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

20% {

-webkit-transform: translateY(0px);

transform: translateY(0px);

}

25% {

-webkit-transform: translateY(-30px);

transform: translateY(-30px);

}

45% {

-webkit-transform: translateY(-30px);

transform: translateY(-30px);

}

50% {

-webkit-transform: translateY(-60px);

transform: translateY(-60px);

}

70% {

-webkit-transform: translateY(-60px);

transform: translateY(-60px);

}

75% {

-webkit-transform: translateY(-90px);

transform: translateY(-90px);

}

95% {

-webkit-transform: translateY(-90px);

transform: translateY(-90px);

}

100% {

-webkit-transform: translateY(-120px);

transform: translateY(-120px);

}

}

div {

width: 200px;

height: 30px;

overflow: hidden;

}

ul {

height: 100%;

width: 100%;

-webkit-animation: scroll 5s infinite;

margin: 0;

padding: 0;

}

li {

line-height: 30px;

height: 30px;

}

• 第一行
• 第二行

以上是我要实现的效果，但是在li的数量不确定的时候这个该怎么写