Animate.css Flickering Question

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<div class="main-container">
  <div id="test1"></div>
</div>

CSS

#test1 {
  position: absolute;
  
  margin: 10%;
  
  width: 25%;
  height: 25%;
  
  opacity: 0;
  
  background: blue;
}

JavaScript

// found on animate.style
const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }
    
    node.addEventListener(
	    'animationend', handleAnimationEnd, {once: true});
  });

// Test ------------------------------------------------------------

let test1 = document.getElementById("test1");

// First I thought the flickering is caused by any animation delay.
//test1.style.setProperty('--animate-delay', '0s');
//document.documentElement.style.setProperty('--animate-delay', '0s');

setTimeout(()=>{
  animateCSS("#test1", "flipInX")
      .then(()=>{
        test1.style.opacity = 1;
      });
}, 1000);

setTimeout(()=>{
  animateCSS("#test1", "flipOutX")
      .then(()=>{
        test1.style.opacity = 0;
      });
}, 5000);

setTimeout(()=>{
  animateCSS("#test1", "flipInX")
  test1.style.opacity = 1;
}, 9000);

setTimeout(()=>{
  animateCSS("#test1", "flipOutX")
  test1.style.opacity = 0;
}, 13000);