CSS - 动画列表顺序

Question

给出以下列表（不同的高度）：

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

是否可以设置列表顺序的动画（图1），例如仅使用CSS将元素<li>2222<br>2222</li>移动到列表底部？

Answer 1

这样的事我想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

好的，我知道这不是一个非常好的答案，这只是这个特定案例的一个概念构思，它听起来很有趣，可以尝试一下，但maaaayyybe你可以尝试这样的东西，如果CSS只是必须。

这个想法是基于边距移动内容，因为它们可以通过CSS进行动画处理。

class car{

    char name[100];
    ..  
}

Object_type ob = new Object_type

JSFIDDLE