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?

Maybe [this](http://stackoverflow.com/questions/14011125/changing-dom-element-order-with-css-crocodoc#answer-25462829) will help you? — Huelfe, Oct 05 '16 at 11:34
are there variables within the list. ie. length of text, width of list items, number of items in list, a class toggled on and off to trigger the position change? — haxxxton, Oct 05 '16 at 11:35
To swap elements in order the commen von @Huelfe works just fine, but if you want to have an animation you can't do that css only. Therefore you would use Javscript to calculate where to put the `
Thanks for your replies, prefer a CSS solution but JQ will do fine as an alternative — Shlomi Schwartz, Oct 05 '16 at 12:02

David Saginashvili · Accepted Answer · 2016-10-05T12:01:32.113

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

score 2 · Answer 2 · answered Oct 05 '16 at 11:50

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

answered Oct 05 '16 at 11:50

Slavenko Miljic

3,836
2
23
36

Like that animation key less approach. Can it go back to its original position? – m4n0 Oct 05 '16 at 12:03

CSS - Animate list order

2 Answers2