Haz que los elementos se desvanezcan con cada llamada de la función onClick con CSS

Con cada clic en la página, se muestra un nuevo elemento de versos. Ahora estoy tratando de dejar que las diferentes partes de texto se desvanezcan. ¿Hay una manera fácil de hacer esto con mi CSS? Ya intenté agregar

#verses{
 position: relative;
 overflow: hidden;
 transition: opacity 1s;
}
@keyframes fadeIn{
 0%{opacity: 0;}
 100%{opacity: 1;}
}
#verses.animating{
 animation: fadeIn 1s;
}

y mi JavaScript hasta ahora:

document.addEventListener('click', myFunction);
let verses = document.querySelector("#verses").children
let count = 0
function myFunction() {
 Array.from(verses).forEach(el=> el.style.display="none")
 if(count < verses.length){
 let el = verses[count]
 el.classList.add("animating")
  el.style.display = 'block'
  //This function runs when the CSS animation is completed
  var listener = el.addEventListener('animationend', function() {
  el.classList.remove("animating");
  });
 count ++
 if(count===verses.length) count =0
}

html:

<div class="banner">
 <div id="verses">
 <div class="verse1" style="display: none">Lorem Ipsum.</div>
 <div class="verse2"style="display: none">Lorem Ipsum.</div>
 <div class="verse3"style="display: none">Lorem Ipsum.</div>
</div>

¿Necesito cambiar las líneas en JavaScript que están llamando para mostrar los versos en bloque? Ya lo probé con lo el.style.opacitycual no funcionó. Espero que haya una solución más fácil a esto.

Solución del problema

Demasiado código tratando de hacer lo mismo... demasiado confuso, también tiene estilos en línea que aparecen innecesariamente. En el lado positivo, el CSS se ve perfecto