Tengo una lista de palabras. Las palabras están en grupos de 3 y la última es un grupo de 4 palabras. Quiero desvanecer y desvanecer cada palabra así:
-Aparece la palabra 1, 0,5 s después aparece la palabra 2, 0,5 s después (por lo tanto, 1 s después de la palabra 1) aparece la palabra 3.
-Desaparece la palabra 1 y al instante aparece la palabra 4 ocupando el lugar de la palabra 1. Luego desaparece la palabra 2 y al instante aparece la palabra 5 ocupando el lugar de la palabra 2, y así sucesivamente.
Quiero mostrar/mostrar siempre 3 palabras (y 4 para el último grupo). Intenté hacerlo, pero la primera palabra de cada grupo desaparece cuando aparece la segunda, y así sucesivamente, y necesito mantener la primera palabra de cada grupo hasta que aparezca la última palabra del grupo y luego la primera palabra del siguiente grupo. toma el lugar de la primera palabra del grupo anterior en un bucle. Espero haber sido lo suficientemente claro. Aquí tenéis una aproximación de lo que he hecho.
https://codepen.io/andrecode/pen/qBmQwYe
<div id="words"> <div> <span>Prévention</span> <span>Ray Charles</span> <span>Elvis Presley</span> </div> <div> <span>Sam Cooke</span> <span>John Lennon</span> <span>Marvin Gaye</span> </div> <div> <span>Bob Dylan</span> <span>Otis Redding</span> <span>Stevie Wonder</span> </div> <div> <span>James Brown</span> <span>Paul McCartney</span> <span>Little Richard</span> <span>Roy Orbison</span>¡Gracias de antemano!