SOURCE

<div>
  <ul>
    <li>1232323</li>
    <li>11323</li>
    <li>1222232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
    <li>1232323</li>
  </ul>
</div>

div{
  height:100px;
  overflow:hidden;
  border:1px solid green;
}
ul li{
  height:20px;
  width:100px;
  /* border-bottom:1px solid red; */
  text-decoration:underline;
}
ul{
  animation-duration: 8s;
  animation-name: slidein;
  /* animation-direction: normal; */
  animation-iteration-count: 2;
}

@keyframes slidein {
  from {
    margin-top: 0%;
    /* width: 300%; */ 
  }

  to {
    /* margin-top: -100%; */
    transform:translateY(-360px);
    /* width: 100%; */
  }
}