Pure CSS/CSS3 Based Image Slider

Preview:

Description:

A pure CSS/CSS3 solution to create an auto fading responsive slideshow from a list of images.

How to use it:

Create an image slider with 2 slides.

<div class="demo">
  <ul class="slider-2">
    <li><!-- slide 1 --></li>
    <li><!-- slide 2 --></li>
  </ul>
</div>

Primary CSS styles for the image slider.

[class*="slider-"] {
  position:relative;
  width:100%;
  height:100%
}
[class*="slider-"] > li {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  bottom:0;
  right:0
}

Add images into the slider using background-image CSS property.

.slider-2 > li:nth-child(1) {
  background: url(1.jpg) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-2-1 15s linear infinite;
  animation: slider-2-1 15s linear infinite
}
.slider-2 > li:nth-child(2) {
  background: url(2.jpg) center no-repeat;
  background-size: cover;
  -webkit-animation: slider-2-2 15s linear infinite;
  animation: slider-2-2 15s linear infinite
}

Add the crossfade transition effect to the slider using CSS3 @keyframes.

@-webkit-keyframes 
slider-2-1 { 
0% {
opacity:1
}
45% {
opacity:1
}
50% {
opacity:0
}
95% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes 
slider-2-2 { 0% {
opacity:0
}
45% {
opacity:0
}
50% {
opacity:1
}
95% {
opacity:1
}
100% {
opacity:0
}
}