CSS list animation list

Question

Given the following list (different heights):

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

Is it possible to animate the order of the list (Figure 1), for example, moving an element <li>2222<br>2222</li>to the bottom of the list with CSS only?

Answer 1

Something like this, I suppose https://jsfiddle.net/7kjznsty

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

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;
  }
}

Answer 2

Well, I know this is not a very good answer. It's just a concept idea for this particular case, it sounded interesting enough to try, but maaaayyybe you could try something like this and do something if only CSS is required.

, CSS.

li{
  transition:all 1s ease;
  line-height:20px;
  }
ul:hover li.test{
  margin-bottom:-120px;
  margin-top:80px;
}

JSFIDDLE