Ротатор изображений Javascript иногда мерцает

Я создал ротатор изображений JS / CSS, который вращает 5 разных изображений в разделе моего веб-сайта с эффектом постепенного появления / исчезновения в CSS.

На настольном компьютере / ноутбуке изображения вращаются идеально плавно, хотя примерно один раз в каждом цикле изображения мерцают и быстро переходят к следующему. Какова причина этого?

Источник:-

CSS

@keyframes fadeinout {
0%, 100% { opacity: 0; }
50%   { opacity: 1; }
}

#rotator {
  animation: fadeinout 3s;
}

JS

function clientRotator(){

  var section = document.getElementById("clients");
  var clientImg = document.createElement("img");
  clientImg.setAttribute("id", "rotator");
  section.appendChild(clientImg);
  clientImg.src = "assets/exxon-mobil.png";
  var imgArray = ["assets/shell.png", "assets/bp.png", "assets/talisman.png", "assets/cnr-international.png", "assets/exxon-mobil.png"];

  var delaySeconds = 3;
  var iteration = 0;

  setInterval(function(){

    section.removeChild(clientImg);
    clientImg = document.createElement("img");
    clientImg.setAttribute("id", "rotator");
    section.appendChild(clientImg);
    clientImg.src = imgArray[iteration];
    clientImg.setAttribute("alt", "Oil & Gas - Gas Turbine Overhauls");

    if (iteration < imgArray.length-1){
      iteration += 1;
    }
    else {
      iteration = 0;
    }
  }, delaySeconds * 1000)

}