CSS3 fade in/out slideshow experiment

dabblet.css

/**
 * CSS3 fade in/out slideshow experiment
 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box}

#slideshow {
	position: relative;
	width: 100%;
	height: 600px}

#slideshow div {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation:fade 24s ease-in-out infinite}

@keyframes fade {
	0% { opacity:0 }
	10% { opacity:1 }
	100% { opacity:0 }
}
	
#slideshow div:nth-child(1) {
	background: url("http://gentlemedia.nl/b2bweddings2/images/wedding01.jpg") no-repeat center top fixed;
	background-size: cover;
	animation-delay:6s}

#slideshow div:nth-child(2) {
	background: url("http://gentlemedia.nl/b2bweddings2/images/wedding04.jpg") no-repeat center top fixed;
	background-size: cover;
	animation-delay: 12s}

#slideshow div:nth-child(3) {
	background: url("http://gentlemedia.nl/b2bweddings2/images/wedding03.jpg") no-repeat center top fixed;
	background-size: cover;
	animation-delay:18s}

dabblet.html

<div id="slideshow">
	<div></div>
	<div></div>
	<div></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}