Background Slideshow Pure CSS

by andyjh07

HTML

<section id="banner"></section>

CSS

@-webkit-keyframes background-cycle {
		0% { background-image: url(http://placekitten.com/g/1920/1080); }
		20% { background-image: url(http://placekitten.com/1920/1080); }
		40% { background-image: url(http://placekitten.com/g/1920/1080); }
		60% { background-image: url(http://placekitten.com/1920/1080); }
		80% { background-image: url(http://placekitten.com/g/1920/1080); }
		100% { background-image: url(http://placekitten.com/1920/1080); }
	}

	#banner {
		
		width: 100%;
		height:300px;

	    background: url(http://placekitten.com/g/1920/1080) fixed no-repeat center;
	    background-size: cover;
	    animation:background-cycle 50s 2s infinite alternate;
	    -webkit-animation:background-cycle 50s 2s infinite alternate;
	}