var i = 1; const title = document.getElementById("display-heading"); var texts = [ "Karibu", "Bienvenido", "স্বাগতম।", "Willkommen", "أهلا بك", "Bienvenue" ]; title.textContent = texts[0]; var loop = setInterval(function() { title.textContent = texts[i]; i = (i+1) % texts.length; // Allows the array to loop }, 1000);¿Cómo agregaría un fundido de entrada/ralentización de la transición?
Hay una pequeña discrepancia entre el CSS y el HTML: el HTML tiene un atributo de identificación con el nombre "display-heading", mientras que el CSS define atributos para una clase con ese nombre.
Puede hacer que el desvanecimiento funcione cambiando la opacidad.
Aquí hay un fragmento ejecutable:
const title = document.getElementById("display-heading"); var texts = [ "Karibu", "Bienvenido", "স্বাগতম।", "Willkommen", "أهلا بك", "Bienvenue" ]; title.addEventListener("transitionend", loop); function loop() { if (title.style.opacity != "1") { texts.push(title.textContent = texts.shift()); title.style.opacity = 1; } else { setTimeout(() => title.style.opacity = 0, 500); } } setTimeout(loop); #display-heading{ font-size: 30px; transition: 0.5s opacity; opacity: 0; } <h1 id='display-heading'>Welcome</h1>