Silky Smooth Background Image Silder With CSS3 Keyframes

A pure CSS solution to create fullscreen background image slider / slideshow with CSS3 powered smooth transitions effects.

How to use it:

Include the required stylesheet in the head section of the html document.

<link rel="stylesheet" href="css/app.css">

Build the html structure for the background image slider.

<section class="sect-banner"> 
  <!-- Slider animation -->
  <ul class="kf-slider">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="v-center">
    <h1>Slider Title</h1>
    <p>Slider Description</p>
  </div>
</section>

Change the background images to yours.

.sect-banner ul.kf-slider li { background-image: url(../images/banner-1.jpg); }
...