JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<body>

  <ul>
    <li>88888888</li>
    <li>11111111</li>
    <li>2222
      <br>2222</li>
    <li>33333333</li>
    <li>44444444</li>
    <li>55555555</li>
    <li>66666666</li>
  </ul>
</body>

CSS

li:nth-child(3) {
  margin-top: 35px;
  animation: anom2 3s ease-out infinite;
}

li:nth-child(2) {
  position: absolute;
  animation: anom 3s ease-out infinite;
}

@keyframes anom {
  50% {
    transform: translateY(200%);
  }
}

@keyframes anom2 {
  50% {
    margin-top: 0;
  }
}