The performance of this snippet is not great in chrome, but nonetheless…
Here you go!
gist | codepen |
$images: "/images/fun.jpg", "/images/yay.jpg", "/images/wow.jpg";
$slide_duration: 1s;
//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;
}