============html====================
  
  <div class="slide-bg"></div>
 
=============css==============
    
    .slide-bg{
        height: 100vh;
        width: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        backface-visibility: hidden;
        animation: slidbg 25s ease-in-out infinite ;
        background-image: url(../images/banner-1.png);
}
 
@keyframes slidbg {
 
    0% {
        background-image: url(../images/banner-1.png);
    }
 
    25% {
        background-image: url(../images/banner-2.png);
    }
 
    50% {
        background-image: url(../images/banner-1.png);
    }
 
    75% {
        background-image: url(../images/banner-2.png);
    }
 
    100% {
        background-image: url(../images/banner-1.png);
    }
}