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

以下是我想要實(shí)現(xiàn)的目標(biāo)的一個(gè)例子: 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>