css3 列表按先后顺序移动过来显示

要实现列表按先后顺序平移过来，可以使用CSS动画结合:nth-child()选择器。以下是一个简单的示例：

HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS:

.list li {
  opacity: 0;
  animation: slide-in 0.5s forwards;
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(300px, -100px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.list li:nth-child(1) {
  animation-delay: 0.5s;
}
.list li:nth-child(2) {
  animation-delay: 1s;
}
.list li:nth-child(3) {
  animation-delay: 1.5s;
}
.list li:nth-child(4) {
  animation-delay: 2s;
}

在这个例子中，列表中的每个<li>元素在进入时都会以X轴移动300px，Y轴-100px来进行移动（可以根据自己的情况调整方向），然后逐个动画延迟0.5秒开始显示，最终位置不再平移。您可以根据需要调整动画持续时间(0.5s)和延迟(0.5s的增量)。