Javascript Css动画在：：之后元素不工作？

因此，我有4个盒子，一个接一个地进入，当它们就位时，它们的：：after应该会展开，同时淡入不透明度0，以在背景上创建某种“涟漪”。这里有3个代码块，第一个用于所有框及其：：after，&--1用于第一个框（另一个类似）：

用于创建涟漪效果的scalingPseudoBox动画如下所示：

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

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

---

我不明白为什么它没有显示出来。我尝试过向后填充动画，但也不起作用。

请添加相关的html代码

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

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