同个区块里多个元素的进场或出场，根据元素的排列顺序，有序的进入或依次的退出，实现更为自然的视觉过渡。使用 css实现该动画

要在CSS中实现同个块级元素的有序进场或出场动画，可以利用CSS动画和布局技巧。这里有一个简单的例子，假设我们有三个元素`element1`, `element2`, 和 `element3`，它们将按照顺序进入或消失。

首先，在HTML中创建这些元素：

<div class="container">
  <div class="item item1">Element 1</div>
  <div class="item item2">Element 2</div>
  <div class="item item3">Element 3</div>
</div>

然后在CSS中编写动画规则：

.container {
  position: relative;
}

.item {
  display: none;
  animation-duration: 2s; /* 设置动画持续时间 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一个关键帧的状态 */
}

/* 使用@keyframes定义动画 */
@keyframes slideIn {
  0% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0); }
}

.item1 {
  animation-name: slideIn;
  animation-delay: 0s;
}

.item2 {
  animation-name: slideIn;
  animation-delay: 1s; /* 比第一个元素晚1秒开始 */
}

.item3 {
  animation-name: slideIn;
  animation-delay: 2s; /* 每个元素比前一个延迟1秒 */
}

在这个例子中，`.item1`立即开始动画，`.item2`在1秒后开始，`.item3`在2秒后开始。每个元素都会从底部平滑地滑入视口，然后在动画结束时保持在顶部。