如何在SCSS中重新运行动画？

我想创建一个简单的气泡动画。我的代码中有两种不同的动画。当我的代码运行时，缩放动画工作，然后移动气泡动画继续无限工作。当图片再次出现在底部时，我想再次触发缩放动画。顺便说一句，JS是不允许的

//set random size and positions for bubbles

@for $i from 1 through 10 {
  $random-size: random(138) + 77;
  $random-position: random(600);
  $random-animation: random(14) + 14;

  .bubble:nth-child(#{$i}) {
    width: $random-size + px;
    height: $random-size + px;
    left: $random-position + px;
    animation: movebubbles #{$random-animation}s linear infinite 0.9s,
      scale 1s alternate ease-out running;

    background: url("https://picsum.photos/id/1/200/300")
      rgba(0, 0, 0, 0)
      no-repeat
      center
      center;
  }
}

.main-container {
  height: 100%;
  width: 100%;
  display: flex;

  .bubbles-container {
    border: 1px solid red;
    display: flex;
    position: relative;
    width: 680px;
    height: 600px;
    overflow: hidden;
    align-items: flex-end;
  }

  .bubble {
    margin-bottom: 0;

    bottom: 0;
    position: absolute;
    background-size: cover;
    background-color: transparent;
  }
}

@keyframes scale {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}

@keyframes movebubbles {
  from {
    margin-bottom: 0%;
    opacity: 1;
  }
  to {
    margin-bottom: 100%;
    opacity: 0.1;
  }
}

---

我的小提琴：

把动画分成几个百分比，比例在1-5%之间，剩下的部分会移动。要找到最佳方法，请将百分比更改为必须增长的百分比

@keyframes goBubblesGo {
  0% {
    transform: scale(0.1);
    margin-bottom: 0%;
    opacity: 1;
  }
  5% {
    transform: scale(1);
  }
  100% {
    margin-bottom: 100%;
    opacity: 0.1;
  }
}

---

检查您的

将动画拆分为百分比，比例在1-5%之间，其余部分将移动，怎么样？