css如何实现手势滑动后背景留痕动画？

Question

如题，想用css animation实现手指向上滑动后背景白色透明渐变动画。
手指会反复向上移动，我目前仅移动手指，如何保证手指返回到原点的时候不会露出后面长方形条的样式。

Answer 1

解决方案：背后长方形条也加了一个高度从0到100%的动画，手指和长方形条定位都以bottom定位，这样长方形条就是从下向上变长了。

@keyframes slideup-finger {
  0% {
    bottom: -50px;
  }
  100% {
    bottom: 0px;
  }
}

@keyframes slideup-height {
  0% {
    height: 0;
  }
  100% {
    height: 60px;
  }
}

.animation-slideup {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .animation-slideup-rect {
        position: absolute;
        bottom: -30px;
        z-index: 300;
        width: 38px;
        height: 60px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
        animation: slideup-height 1.2s linear 0s infinite;
      }

      .animation-slideup-finger {
        position: absolute;
        bottom: -30px;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transform-origin: 30% 0%;
        animation: slideup-finger 1.2s linear 0s infinite;

        img {
          width: 90px;
          height: auto;
        }
      }
    }