pure scss slideshow

slideshow.scss

$images: "/images/fun.jpg", "/images/yay.jpg",  "/images/wow.jpg";
$slide_duration: 2s;


//preload images 
body:before {
  $urls: url('');
  @each $image in $images {
    $urls: $urls + url(#{$image}) ;
  }
  display: none;
  content: $urls;
}

@keyframes slideshow {
  $current_percentage: 0;
  $increment: 100/length($images);
  @each $image in $images {
    #{$current_percentage}% { background-image: url($image); }
    $current_percentage: $current_percentage + $increment;
  }
}

.slideshow-image {
  animation-name: slideshow;
  animation-timing-function: step-end;
  animation-fill-mode: forwards;
  animation-duration: $slide_duration * length($images);
  animation-iteration-count: infinite;
  
  background-size: cover;
  background-position: center; 
}