CSS - Animate list order

Question

Given the following list (different height):

<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 the element <li>2222<br>2222</li> to the bottom of the list using 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

OK, I know this is not a really good answer, It's just a concept idea for this specific case, it sounded interesting enough to try it out, but maaaayyybe you could try something like this and work something out if CSS only is a must.

The idea would be to move the content based on margins since they can be animated by CSS.

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

JSFIDDLE