background-layers.scss

.cloud {
  @for $i from 1 through 3 {
    $new-position: 10*$i;
    
    li:nth-of-type(#{$i}) {
      background-image: url("http://krystalcampioni.com/talk/clouds.svg");
      top: -(#{$new-position})+(vh); // repositioning each cloud on top of each other 
      animation-duration: (10*$i)+(s); // each layer will have a different speed
      opacity: (.25*$i); // clouds close to the camera will be more transparent
      background-repeat: repeat-x; // use repeat-x to create an infinite background-scroll
    }
  }
}