How to add a fading animation to my sldieshow

Question

I have been trying to make this animation fade and not change abruptly, any ideas?

I tried this code:

<script> var i = 0; var images = []; var slideTime = 3000; // 3 seconds

images[0] = '/includes/img/inmobg1.webp';
images[1] = '/includes/img/inmobg2.jpg';

function changePicture() {
    document.getElementById('bg_static').style.backgroundImage = 'url(' + images[i] + ')';
    
    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    setTimeout(changePicture, slideTime);
 }
 
 window.onload = changePicture;

</script>

#bg_static{ background: #3d3d3d; background-position:bottom; background-size: cover; background-color:#000; background-repeat: no-repeat; height: 340px; width: 100%; left: 0; margin-left: 0; top: 60px; position: absolute; z-index: -1001; }

<div id="bg_static"></div>

Answer 1

You didn't provide enough info but i think you want something like this:

.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/* The style below is just for the appearance of the example div */

.style {
  width:90vw; height:90vh;
  text-align:center;
  padding-top:calc(50vh - 50px);
  margin-left:5vw;
  border:4px double #F00;
  background-color:#000;
}
.style p {
  color:#fff;
  font-size:50px;
}

<div class="style fade-in">
  <p>[content]</p>
</div>

User css animation and add animation class to that element whenever you want to animate the element.