JavaScript CSS Animation (gebruikt Modernizr en jQuery fallback)

slideshow.js

// The slideshow:
if(Modernizr.cssanimations)
{
    // Decent browser, use blazing fast css animations:
    var slides       = document.querySelectorAll('#banners div.slide');
    var currentSlide = 0;

    function nextSlide()
    {
        slides[currentSlide].className = 'slide';
        currentSlide ++;
        if(currentSlide >= slides.length) { currentSlide = 0; }
        slides[currentSlide].className = 'slide animate';
    }

    for(var i=0; i<slides.length; i++)
    {
        // The war goes on...
        slides[i].addEventListener('webkitAnimationEnd', nextSlide, false);
        slides[i].addEventListener('animationend', nextSlide, false);
        slides[i].addEventListener('OAnimationEnd', nextSlide, false);
    }
    // Begin:
    slides[currentSlide].className = 'slide animate';
} else {
    // Ancient browser, fallback to jQuery:
    $('#banners div.slide').css({opacity: 0});
    var slides = $('#banners div.slide');
    var currentSlide = 0;

    function nextSlide2()
    {
        $(slides[currentSlide]).animate({opacity: 0}, 1000);
        currentSlide ++;
        if(currentSlide >= slides.length) { currentSlide = 0; }
        $(slides[currentSlide]).animate({opacity: 1}, 1000);
    }

    $(slides[currentSlide]).css({opacity: 1});
    setInterval(nextSlide2, 7000);
}

slideshow.scss

@include keyframes(slideAnimation) {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1 }
	100% {
		opacity: 0;
		@include transform(scale(1.2));
	}
}

#banners {
	div.slides {
		width: 100%;
		height: 100%px;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
	}
	div.slide {
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		@include background-size(cover);
		background-position: center center;
		background-repeat: no-repeat;
		&.animate {
			-webkit-animation: slideAnimation 7s linear;
			-moz-animation: slideAnimation 7s linear;
			-o-animation: slideAnimation 7s linear;
			-ms-animation: slideAnimation 7s linear;
			animation: slideAnimation 7s linear;
		}
	}
}

slideshow.xsl

<div id="banners">
	<div class="slides">
		<xsl:for-each select="banners/entry">
			<div class="slide" style="background-image: url({concat($workspace, afbeelding/@path, '/', afbeelding/filename)});" />
		</xsl:for-each>
	</div>
</div>