css做的出场动画，出场后元素又回来了

可以使用CSS3中的动画和关键帧（keyframe）来实现出场动画和回到原位的效果。具体实现步骤如下：

1. 定义元素的初始状态和最终状态，以及动画持续时间等属性；
2. 使用 @keyframes 定义动画的关键帧，即元素从开始状态到结束状态的过程；
3. 将动画应用到元素上，使用 animation 属性。

下面是一个示例代码，实现了一个元素从右侧出场，然后又回到原位的动画效果：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: moveOutAndIn 2s ease-in-out;
}

@keyframes moveOutAndIn {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

解释一下代码：

- 定义了一个红色的正方形元素，宽高均为 100px。
- 在 .box 的样式中，应用了一个名为 moveOutAndIn 的动画，持续时间为 2s，缓动函数为 ease-in-out。这个动画会使元素先向右移动 200px，然后又回到原位。
- 在 @keyframes 中，定义了动画的三个关键帧：0% 表示开始状态，即元素没有移动；50% 表示中间状态，元素向右移动了 200px；100% 表示结束状态，元素回到了原位。

这样就实现了一个简单的出场动画和回到原位的效果。