Automatic SCSS slideshow used on masseriagialli.it's homepage

slideshow.scss

$images-count: 4;
$slideshow-duration: 6;
$slideshow-percentage-per-slide: 100/$images-count;
$slideshow-slides-overlap: $slideshow-duration/($images-count+1)+1;
.slideshow {
	overflow: hidden;
	position: relative;
	height: 400px;
	z-index: 0;
	background-color: $color-golden;
}
	.slideshow__image {
		position: absolute;
		top: 0;
		left: 0;
		animation: slide-off #{$images-count*$slideshow-duration}s linear infinite backwards;
	}
	@for $i from 0 through $images-count - 1 {
		.slideshow__image--#{$i+1} {
			animation-delay: #{($i*$slideshow-duration) - $slideshow-slides-overlap}s;
			z-index: $images-count - $i;
		}
	}
	@keyframes slide-off {
		5%, #{$slideshow-percentage-per-slide + "%"} {//5%, 25%
			opacity: 1;
		}
		#{$slideshow-percentage-per-slide + 5 + "%"} {//30%
			transform: translateY(-40px);
			-moz-transform: translateY(-40px) rotate(0.1deg);
			opacity: 0;
		}
		0%, 100% {
			opacity: 0;
		}
	}