$w: 25;
$left: 550px;
$top: 275px;
$bc: #ff3300;

.b {
  position: relative;
  left: $left;
  top: $top;
  //background-color: black;
  width: #{$w}px;
  height: #{$w}px;
  //border: 1px solid black;
  //border-radius: 50%;
}

@keyframes anim {
  0% {
    transform: scale(3.0) skew(-180deg, 180deg) rotate(360deg);
  }
  100% {
    transform: scale(-1.0) skew(180deg, -180deg) rotate(0deg);
  }
}

@keyframes anim2 {
  0% { border-radius: 0%; }
  100% { border-radius: 100%; }
}

@keyframes anim3 {
  0% { opacity: 0.75; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}


html {
background:
	linear-gradient(limegreen, transparent),
	linear-gradient(90deg, skyblue, transparent),
	linear-gradient(-90deg, coral, transparent);
background-blend-mode: screen;
  height: 100%;
  width: 100%;
}

@keyframes sc {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(3) rotate(180deg); }
  100% { transform: scale(0.3) rotate(360deg); }
}

.a {
  transform-origin: $left + 100px $top;
  animation-name: sc, anim3;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: backwards;
}

.b div {
    background-color: blue;
    position: absolute;
    animation-name: anim, anim2;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    animation-fill-mode: backwards;
    box-shadow: 0px 0px 40px 3px #444;
}

@for $i from 1 through 10 {
  .b#{$i} {
    left: #{-$i*$w}px;
    width: #{$w /* - $i * 2 */}px;
    height: #{$w /* - $i */}px;
    transform-origin: #{$i*$w+$w/2}px #{$w/2}px;
    animation-delay: #{$i*100}ms;
    background-color: adjust-hue($bc, $i*10) !important;
  }
}

@for $i from 11 through 20 {
  $j: $i - 10;
  .b#{$i} {
    //display: none;
    left: #{$j*$w}px;
    width: #{$w /* - $j * 2*/}px;
    height: #{$w /* - $j */}px;
    transform-origin: #{-$j*$w + $w/2}px #{$w/2}px;
    animation-delay: #{$j*100}ms;
    background-color: adjust-hue($bc, $j*10) !important;
  }
}

@for $i from 21 through 30 {
  $j: $i - 20;
  .b#{$i} {
    //display: none;
    bottom: #{-$j*$w}px;
    width: #{$w/* - $j*/}px;
    height: #{$w/* - $j * 2*/}px;
    transform-origin: #{$w/2}px #{- $j*$w + $w/2}px;
    animation-delay: #{$j*100}ms;
    background-color: adjust-hue($bc, $j*10) !important;
  }
}

@for $i from 31 through 40 {
  $j: $i - 30;
  .b#{$i} {
    //display: none;
    bottom: #{$j*$w}px;
    width: #{$w/* - $j*/}px;
    height: #{$w/* - $j * 2*/}px;
    transform-origin: #{$w/2}px #{$j*$w + $w/2}px;
    animation-delay: #{$j*100}ms;
    background-color: adjust-hue($bc, $j*10) !important;
  }
}