How to Make Simplest CSS Slideshow

Postingan ke dua setelah yang pertama di tahun ini, AA Koben akan membicarakan tentang bagaimana cara membuat CSS slideshow sangat sederhana! Namanya juga simplest, maka kalian jangan mengharapkan bertemu dengan efek-efek yang full stylish punya ya ;))
Animasi slideshow yg dihasilkan pada CSS tidak lain yaitu menggunakan rule @keyframes.
DEMO

.fadein {
position: relative;
height: 212px;
width: 100%;
}
.fadein img {
position: absolute;
left: 0;
right: 0;
opacity: 0;
animation-name: fade;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100%;
height: 212px;
}
.fadein img:nth-child(1) {
animation-delay: 0s;
}
.fadein img:nth-child(2) {
animation-delay: 3s;
}
.fadein img:nth-child(3) {
animation-delay: 6s;
}
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}

<div class="fadein">
<img src="LINK-IMAGE-1" alt="" />
<img src="LINK-IMAGE-2" alt="" />
<img src="LINK-IMAGE-3" alt="" />
</div>

Jika sobat kepengen menambahkan image, maka pada variabel CSS tinggal tambahkan begini saja.fadein img:nth-child(4) {
animation-delay: 9s;
}Kalau kurang tinggal buat lagi sj yg seperti itu yah ;)

Source and others similar tutor:
>> Simplest CSS Slideshow
>> Simplest jQuery Slideshow
>> Small and Simple Slideshow jQuery
>> More Simple jQuery Slideshows
>> Simplest JavaScript Slideshow
>> CSS3 animation Property
>> CSS3 animation-iteration-count Property
>> CSS3 animation-duration Property
>> CSS3 animation-name Property
>> CSS3 :nth-child() Selector
>> Surprising CSS properties you can use today
>> Simpel Content Slider Pure CSS3

Happy slider \m/