JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>4</li>
  <li>54</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>1</li>
  <li>1</li>
  <li>2</li>
</ul>

CSS

body {
  margin: 0;
}

ul, li{
  padding:0;
  margin:0;
  list-style:none;
}
li {
  padding:15px;
}
ul {
  position:fixed;
  left:0;
  top:-300px;
  -webkit-animation:5s rolling infinite;
  animation:5s rolling infinite;
}
@-webkit-keyframes rolling{
  0% {
    top: 0;
  }
  50% {
    top: -240px;
  }
  100% {
    top: -300px;
  }
}
@keyframes rolling{
  0% {
    top: 0;
  }
  100% {
    top: -300px;
  }
}