Pure CSS Auto Playing Slideshow

Today, In this article we’ re going to create Simple Auto-Playing Slideshow with help of css3, Every web designer need to add Slideshow to her project and for plane Slideshow they use some jquery plugin, using the plugin web page is taking a time for load, so we can avoid all jquery plugin and use simple css3 Slideshow without any jquery.

 


<div class="container"></div>

 

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.container {
	width:320px;
	height:216px;
	margin:auto;
	animation: bg-animation 10s infinite;
}


@keyframes bg-animation {
	0% {
		background: url('http://www.99lesson.com/wp-content/uploads/2017/06/amazing-21-handwritten-amazing-free-fonts-for-every-creative-designer.png') no-repeat;
	}
	50% {
		background: url('http://www.99lesson.com/wp-content/uploads/2017/05/graphic-designers-mistakes.jpg') no-repeat;
	}
	100% {
		background: url('http://www.99lesson.com/wp-content/uploads/2017/05/99lesson-birth.jpg') no-repeat;
	}
}

Leave a Reply