我需要一些幫助，我的目標是在一個包含三行文本的div上實現CSS動畫，我想在它們之間切換，當從一行移動到另一行時，我想讓CSS動畫像橡皮擦一樣，我的理解是，我需要一個div，像一個具有線性漸變白色和透明的遮罩，并嘗試將這個遮罩從底部移動到頂部，當每行完成時，相反

以下是我想要實現的目標的一個例子: https://www . veed . io/view/d3f 475 f 8-4407-40ce-8884-7 D1 faf 0 c 941d？面板=共享

以下是我的嘗試:

.center {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: gray; */
}

.container {
  height: 45px;
  overflow: hidden;
  position: relative;
}

#test {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: moveBottomToTop 2s linear infinite;
}

#test1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 90%,
    rgba(255, 255, 255, 1) 100%
  );
  animation: moveTopToBottom 2s linear infinite;
  animation-delay: 2.5s;
}

@keyframes moveBottomToTop {
  0% {
    visibility: hidden;
    transform: translateY(50px);
  }
  100% {
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes moveTopToBottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}

<div class="center">
  <div class="container">
    <div id="test"></div>
    <div id="test1"></div>
    <p class="item">this is test text 1</p>
    <p class="item">this is test text 2</p>
    <p class="item">this is test text 3</p>
  </div>
</div>