Create automatic background changer with pure css.

#css #html #automatic #firstpost

As this is my first post, let's keep it easy and short.
Today we are gonna see how to make image slideshow using only css and how much it can be fun of.
Let's get started with our simple html.
HTML

<div id="box"></div>

We have made our simple html. Now let's give it style.
CSS

#box{
  margin: 300px auto; /*as per your preferences*/
  height: 300px;
  width: 450px;
  border: 2px solid crimson;
}

Now let's start with making our slider animation.
We have to give our box a animation name (in our case we will give it example)

#box{
  margin: 300px auto; /*as per your preferences*/
  height: 300px;
  width: 450px;
  border: 2px solid crimson;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

We have given our animation name and set the duration 10 seconds. We will put 5 Images and each image is gonna last for 2 seconds. Iteration count is set to infinite so it would run continuously.
After that let's give our animation

@keyframes example{
   0%{
     background-image: url(image1);
   }
   25%{
     background-image: url(image2);
   }
   50%{
     background-image: url(image3);
   }
   75%{
     background-image: url(image4);
   }
   100%{
     background-image: url(image5);
   }
}

You can chose your own images as per your need.
Conclusion
We have made simple background image changer animation with simple css. Hope you like this post. Thankyou for reading this.