如何在 CSS 中运行动画？答案

【问题标题】：How to rerun animation in SCSS?如何在 CSS 中运行动画？
【发布时间】：2020-09-21 02:58:21
【问题描述】：

我想创建一个简单的气泡动画。我的代码中有两种不同的动画。当我的代码运行缩放动画时，movebubbles 动画继续无限工作。当图片重新出现在底部时，我想再次触发缩放动画。顺便说一句，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;
  }
}

我的小提琴：https://jsfiddle.net/y3aujceg/12/

【问题讨论】：

如何将动画分成百分比，然后在 1-5% 之间进行缩放，其余的则移动？

标签： css animation sass

【解决方案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;
  }
}

检查您的updated fiddle

【讨论】：