CODEWITHSUNDEEP
cssanimationsass
rnkr
rnkr

Reputation: 15

How to rerun animation in SCSS?

I would like to create a simple bubble animation. There are two different animations in my code. When my code runs scale animation is working then movebubbles animation continues to work infinitely. When pics reappear on bottom I want to trigger scale animation again an again. Btw, JS is not allowed.

//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;
  }
}

My fiddle: https://jsfiddle.net/y3aujceg/12/

Upvotes: 0

Views: 73

Answers (1)

Lukas J.
Lukas J.

Reputation: 196

How about just splitting animation into percentages and between 1-5% the scale would happen and for the rest, it'll move. To find your best way, change the percentage up to when it has to grow.

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

Check your updated fiddle

Upvotes: 1

Related Questions