:: after元素上的CSS动画不起作用？

Question

所以我有4个框，一个框接一个框，当它们到位时，它们的:: after应当展开，同时逐渐变为不透明度0，以在背景上创建某种“波纹”。所以这是3个代码块，第一个代码块适用于所有框，而它们的:: after则＆-1表示第一个框（其他类似）：

&__box {
    height: 70%;
    width: 70%;
    background-color: rgba($color-grey-light-1, 0.9);
    border-radius: 0.5rem;
    border: 2px solid $color-primary;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    user-select: none;

    &::after {
      content: '';
      display: inline-block;
      height: 100%;
      width: 100%;
      background-color: $color-grey-light-1;
      border-radius: 0.5rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;

      transition: all 0.4s;
    }

    &--1 {
      grid-row: 1 / 3;
      grid-column: 6 / 8;

      width: 80%;
      box-shadow: 0 -10px 15px -2px rgb(26, 25, 25),
        0 3px 15px -2px $color-primary;

      animation: scalingBox 0.5s ease-out 1s, enterTopBox 0.5s ease-out 0.5s;
      animation-fill-mode: backwards;

      &::after {
        animation: scalingPseudoBox 0.5s ease-out 1.5s;
      }
    }

用于创建波纹效果的scalePseudoBox动画是这样的：

@keyframes scalingPseudoBox {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

我不明白为什么它不显示。我尝试了向后填充动画，但是它也不起作用。