//Rotate all ovals in increments of 30
@mixin rotateOval {
  @for $i from 1 through 815 {
    $r: $i * 30;     //Set value in increments of 30
    @if $r >= 360 {     //If degree is larger than 360,
      $r: $r % 360; //Convert to 0-360 range to prevent large rotate values (not sure if necessary)
    } 
    &:nth-child(#{$i}) {
      transform: rotate(-#{$r}deg); //Apply value for negative rotation
    }
  }
}

body{
  background: #ff00f7;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-content: center;
  margin: 0;
  grid-template-columns: repeat(37,40px);
  grid-template-rows: repeat(40,40px);
}

.oval {
  width: 40px;
  height: 20px;
  border-radius: 50%;
  background-color: #00cc10;
  box-shadow: 
    inset 0px 2px 0px 1px black,
    inset 0px -1px 0px 2px white;
  &:nth-child(odd){
    animation: moveUp 1500ms cubic-bezier(0,.88,1,1);
  }
  &:nth-child(even){
    animation: moveDown 1500ms cubic-bezier(0,.88,1,1);
  }
  @include rotateOval;
}

@keyframes moveUp {
  0%{
    transform: translateY(50px);
  }
  100%{
    transform: auto;
  }
}
@keyframes moveDown {
  0%{
    transform: translateY(-50px);
  }
  100%{
    transform: auto;
  }
}