Pure CSS Background Image Slider with CSS keyframes

The background image slider builds with pure CSS and CSS keyframes animation. It is a fullscreen slideshow which includes two different demo version. It also responsive for all type of media devices.

It is a pure CSS3 slider which is easy to customize and comes up with the nice and clean design. It is a stupid simple slider which enhances the beauty of your website.

The slider work with automatically and slide the images automatically. It has fade-in-out animations which can be easily changed.

How to Use Background Slider with Keyframes

First of all, you need to include the slider app.css file on the HTML page.

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

Next, you need to create the set of slides and for this, you need to define unorder list inside the main section. To add images, you need to refer to app.css because the images are defined as background in the stylesheet.

<section class="sect-banner">
<!-- Slider animation -->
<ul class="kf-slider">
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="v-center">
    <h1>Background Image Slider<br>with CSS keyframes</h1>
    <p>Stupid Simple Slider: Silky smooth background image slider with css keyframes.</p>	
</div>
</section>

Let’s have a look the how the images are defined. It uses the @keyframes

@-webkit-keyframes slider-lg {
 0% {
  background-image: url(../images/banner-1.jpg); }
 33% {
  background-image: url(../images/banner-2.jpg); }
 66% {
  background-image: url(../images/banner-3.jpg); }
 100% {
  background-image: url(../images/banner-1.jpg); } }