Quiero hacer que algunas imágenes se muestren como diapositivas con efecto fadeIn en css. Todo funciona bien, las imágenes se muestran en un período de 3 segundos con el método javascript setInterval, pero solo se muestra la primera imagen con la animación fadeIn.
.slide { position: absolute; height: 100vh; width: 66vw; animation: fadeIn 1s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } <img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg">Solo hay un jpg agregado a HTML y el código javascript está escrito para reemplazar la ruta del archivo desde
<img class="slide" src="1.JPG">a "2.jpg", "3.jpg", etc.
Solo la primera imagen tiene animación, todo lo que se muestra después no tiene animación.
Cuando reviso la consola, todas las imágenes siguientes aún tienen la clase .slide y todas sus propiedades posición/ancho/alto/animación, pero se muestran sin animación.
Algunas ideas ?
Difícil decir qué es exactamente lo que quieres, pero con CSS puro quizás algo como esto
.slide { position: absolute; opacity: 0; height: 100vh; width: 66vw; animation: fadeIn 1s forwards; } .two { animation-delay: 3s; } .three { animation-delay: 6s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } <img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg"> <img class="slide two" src="https://compote.slate.com/images/f063a07e-e5ab-4e04-8093-281d0a28ebe8.jpeg"> <img class="slide three" src="https://i.ytimg.com/vi/nWLUdoK5fSs/maxresdefault.jpg">Básicamente, debe activar la animación css cada vez que cambia el src . Puede hacerlo eliminando la clase de elemento, activando un reflujo DOM y agregando la clase nuevamente. Pero debe tener cuidado porque activar el reflujo puede ser una operación costosa. Lea más sobre esto aquí .
const images = [ "https://via.placeholder.com/300?text=image1", "https://via.placeholder.com/300?text=image2", "https://via.placeholder.com/300?text=image3", ]; const img = document.querySelector(".slide"); let imageIndex = 0; const imageInterval = setInterval(() => { imageIndex++; if (imageIndex >= images.length) { clearInterval(imageInterval); } else { img.src = images[imageIndex]; img.classList.remove("slide"); void img.offsetWidth; // trigger a DOM reflow img.classList.add("slide"); } }, 3000); .slide { position: absolute; height: 100vh; width: 66vw; animation: fadeIn 1s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } <img class="slide" src="https://via.placeholder.com/300?text=image1">