DEV Community

tilakjain123
tilakjain123

Posted on

Create automatic background changer with pure css.

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
   }
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)