鼠标移入父盒子，子元素显示动画

还有一个问题还没解决，多个盒子快速从上面移动都会显示移出动画，移出动画可以不用

HTML

<div class="recommend-goods">
  <div class="goods-box">
    <img
      class="goods-img"
      src="https://www.fubizprints.com/wp-content/uploads/thumbnails/detail/02-entry-22-evokeloeildeos.jpg.webp"
      alt=""
    />
    <div class="box-arrow">
      <i class="el-icon-right"></i>
    </div>
  </div>
</div>

CSS

  .recommend-goods {
    width: 180px;
    height: 100%;
    font-size: 14px;
    text-align: center;
    margin-right: 70px;
    cursor: pointer;
    .goods-box {
      width: 100%;
      position: relative;
      .goods-img {
        width: 100%;
      }
      .box-arrow {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 50px;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 0px; 
      }
    }
  }
  //鼠标移入父盒子
  .recommend-goods:hover .box-arrow {
    animation: getInto 0.4s ease-out forwards;
  }
  //鼠标移出父盒子
  .recommend-goods:not(:hover) .box-arrow {
    animation: signOut 0.4s ease-in;
  }
  //进入动画
  @keyframes getInto {
    0% {
      width: 0;
      opacity: 0;
      font-size: 0px;
    }

    100% {
      width: 100%;
      opacity: 1;
      font-size: 28px;
    }
  }
  //离开动画
  @keyframes signOut {
    100% {
      width: 0;
      opacity: 0;
      font-size: 28px;
    }

    0% {
      width: 100%;
      opacity: 1;
      font-size: 0px;
    }
  }