看一下this simple JsFiddle I made,它会动画进入列表的新项目.

但是,动画仅影响第一行,而不影响所有行.
我使颜色随机,所以当插入新项目时,您实际上可以看到其他行上的“跳跃”.

有没有办法让它只用CSS影响所有行？

@keyframes enter {
  0% {
    transform: translateX(-100%);
    margin-left: calc(var(--w) * -1);
  }
  100% {
    transform: translateX(0px);
    margin-left: 0
  }
}

这是我的动画,这是我的列表项：

.slidepush li {
  --w: 50px;
  width: var(--w);
  height: 50px;
  background-color: red;
  vertical-align: top;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.enter {
  animation: enter 1s;
}

Ceated一个管理ul和实现add的简单类：

class SlidePush {
    constructor(ulElement) {
    this.element = ulElement;
  }
  add(item) {
    this.element.prepend(item.addClass('enter'));
  }
}
const sp = new SlidePush($(".slidepush"));
setInterval(() => {//
  var colors = ['red','blue','green','black'];
  var color = colors[Math.floor(Math.random() * colors.length)];
  sp.add($("