Why does the animate.css animation flicker after fade in

If an animation is triggered while the element’s opacity is set to 0, it fades in, but briefly flickers after completion. This occurs even when the opacity is set to 1 directly afterwards.

Here is a jsfiddle that illustrates the problem.

---

Just for context: I use this function to add animations classes (found on the animate.css website):

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});
  });

---

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

• Since it returns a promise, I thought it should be enough to set the opacity in a .then() statement.

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

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

...

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

• Setting the value immediately doesn’t work either.

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


animateCSS("#test1", "flipInX")
test1.style.opacity = 1;

...

animateCSS("#test1", "flipOutX")       // flickers
test1.style.opacity = 0;

What is the correct way to achieve this effect?

---

I use animate.css 4.1.1.