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.map to iterate through the elements in the slides array slides.map( (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>