How do i create a cross fading so i can use javascript to call the keyframes in the css?

Question

I am trying to create a fade in and fade out effect on my photos in html. How do I call the keyframes in css to javascript when the image is displayed?

I have to use javascript as part of the requirements for the slideshow

It seems like i have to insert .classlist.add?

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("fade");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 5000);
}

@keyframes fadein {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fadeout {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

    <!-- Images used for slideshow -->
    <div class="fade">
      <figure><img class="img-fluid" src=https://via.placeholder.com/150

C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/"> </figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150

C/O https://placeholder.com/eg"></figure>
    </div>
    </div>

Answer 1

You don't need keyframes for this:

// Set the delay between slides
const delay = 1000

// Get an array of any elements with a class of 'fade'
const slides = Array.from( document.querySelectorAll('.fade') )

// Function to cycle through each slide, show it, then hide it after the specified delay
const cycleSlides = () => {
  // use Array.forEach to iterate through the elements in the slides array
  slides.forEach( (slide, i) => {

    // Show the slide
    setTimeout( () => {
      showSlide(slide)
    }, delay * i)

    // Hide the slide after the specified delay
    setTimeout( () => {
      hideSlide(slide)
    }, (delay*i)+delay)

  }) // End of map iterator
}

// Function to fade in a single slide
const showSlide = (slide) => {
  //Add the '--in' class
  slide.classList.add('--in')
}

// Function to fade out a single slide
const hideSlide = (slide) => {
  // Remove the '--in' class
  slide.classList.remove('--in')
}

// Call our cycle function for the first time
cycleSlides()

// Restart our cycle function each time it finishes
setInterval( () => {
  cycleSlides()
}, delay*slides.length)

.fade {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.fade.--in {
    opacity: 1;
}

<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/0000FF?text=1" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FF0000?text=2" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FFFF00?text=3" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/008000?text=4">
</div>

UPDATE: ES5 version at OP's request:

// Set the delay between slides
var delay = 1000

// Get an array of any elements with a class of 'fade'
var slides = Array.from( document.querySelectorAll('.fade') )

// Function to cycle through each slide, show it, then hide it after the specified delay
function cycleSlides() {
    // iterate through the elements in the slides array
    for (var i = 0; i < slides.length; i++) {

        // Show the slide
        showSlide(slides[i], delay*i)

        // Hide the slide after the specified delay
        hideSlide(slides[i], (delay*i)+delay)
    } // End of map iterator
}

// Function to fade in a single slide
function showSlide(slide, _delay) {
    //Add the '--in' class
    setTimeout(function() {
        slide.classList.add('--in')
    }, _delay)
}

// Function to fade out a single slide
function hideSlide(slide, _delay) {
    // Remove the '--in' class
    setTimeout(function() {
        slide.classList.remove('--in')
    }, _delay)
}

// Call our cycle function for the first time
cycleSlides()

// Restart our cycle function each time it finishes
setInterval(function() {
    cycleSlides()
}, delay*slides.length)

.fade {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.fade.--in {
    opacity: 1;
}

<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/0000FF?text=1" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FF0000?text=2" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FFFF00?text=3" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/008000?text=4">
</div>