@keyframes float-up {
    /* At first, float element from outside the of viewport to top */
    0%    { bottom:calc(var(--shape-radius)*-1); }
    100%  { bottom:calc(100% - var(--shape-radius)); }
}

@keyframes bounce-up-and-down {
    /* then, bounce element between top and bottom */
    0%    { bottom:calc(100% - var(--shape-radius)); }
    100%  { bottom:0; }
  }

@keyframes sway-left-to-right {
    /* Meanwhile shift element:before (conatins actual shape svg), from left to right or ... */
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes sway-right-to-left {
    /* ... from right to left. The direction is chose random. */
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.shape {
  position: absolute;
  left: var(--shape-left-offset);
  display: block;
  width: var(--shape-radius);
  height: var(--shape-radius);
  animation: float-up var(--shape-float-duration1) 0s ease-in-out, bounce-up-and-down var(--shape-float-duration2) var(--shape-float-duration1) ease-in-out alternate infinite;
}

.shape::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  animation: var(--shape-sway-type) var(--shape-sway-duration) 0s ease-in-out alternate infinite;
  
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
}

.shape:nth-child(4n+1) { height:calc(var(--shape-radius)/3); padding-top:15px; }
.shape:nth-child(4n+2) { height:calc((var(--shape-radius)/3)*2); }
.shape:nth-child(4n+4) { height:calc((var(--shape-radius)/3)*2); }
.shape:nth-child(4n+6) { height:var(--shape-radius); }
.shape:nth-child(4n+9) { height:calc(var(--shape-radius)/2); padding-top:15px; }
.shape:nth-child(4n+20) { height:var(--shape-radius); }

.shape:nth-child(4n+1):before { background-image:url(../img/animation/shape1.svg); }
.shape:nth-child(4n+2):before { background-image:url(../img/animation/shape2.svg); }
.shape:nth-child(4n+3):before { background-image:url(../img/animation/shape3.svg); }
.shape:nth-child(4n+4):before { background-image:url(../img/animation/shape4.svg); }
.shape:nth-child(4n+5):before { background-image:url(../img/animation/shape5.svg); }
.shape:nth-child(4n+6):before { background-image:url(../img/animation/shape6.svg); }
.shape:nth-child(4n+7):before { background-image:url(../img/animation/shape7.svg); }
.shape:nth-child(4n+8):before { background-image:url(../img/animation/shape8.svg); }
.shape:nth-child(4n+9):before { background-image:url(../img/animation/shape9.svg); }
/* repeat some shapes to appear more often than by calculation */
.shape:nth-child(4n+10):before { background-image:url(../img/animation/shape3.svg); }
.shape:nth-child(4n+20):before { background-image:url(../img/animation/shape6.svg); }