Мигает анимация keyframes?

function headerScroll() {
  addWindowScrollEvent = true;
  const header = document.querySelector('header.header');
  const logo = document.querySelector('.header__logo');
  const logoImage = document.querySelector('.logo__image');
  const headerShow = header.hasAttribute('data-scroll-show');
  const headerShowTimer = header.dataset.scrollShow ? header.dataset.scrollShow : 500;
  const startPoint = header.dataset.scroll ? header.dataset.scroll : 1;
  let scrollDirection = 0;
  let timer;
  document.addEventListener("windowScroll", function(e) {
const scrollTop = window.scrollY;
clearTimeout(timer);
if (scrollTop >= startPoint) {
  if (!header.classList.contains('_header-scroll')) {
    header.classList.add('_header-scroll');
    logo.classList.add('_header-scroll');
    logoImage.classList.add('_header-scroll');
  }
  if (headerShow) {
    if (scrollTop > scrollDirection) {
      // downscroll code
      header.classList.contains('_header-show') ? header.classList.remove('_header-show') : null;
    } else {
      // upscroll code
      !header.classList.contains('_header-show') ? header.classList.add('_header-show') : null;
    }
    timer = setTimeout(() => {
      !header.classList.contains('_header-show') ? header.classList.add('_header-show') : null;
    }, headerShowTimer);
  }
} else {
  if (header.classList.contains('_header-scroll')) {
    header.classList.remove('_header-scroll');
    logo.classList.remove('_header-scroll');
    logoImage.classList.remove('_header-scroll')
  }
  if (headerShow) {
    header.classList.contains('_header-show') ? header.classList.remove('_header-show') : null;
  }
}
scrollDirection = scrollTop <= 0 ? 0 : scrollTop;
  });
}

setTimeout(() => {
  if (addWindowScrollEvent) {
let windowScroll = new Event("windowScroll");
window.addEventListener("scroll", function(e) {
  document.dispatchEvent(windowScroll);
});
  }
}, 0);

headerScroll();

.header._header-scroll {
  position: fixed;
}

.header__logo {
  position: relative;
}

.logo__image {
  transition: opacity 0.3s ease 0.5s, height 0.3s ease 0.8s;
  height: 100px;
}

.logo__image-name {
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  left: 0;
  width: 150px;
  height: 80px;
  background: orange;
}

.logo__image-circle {
  position: relative;
  left: 70px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
}

.logo__image-scroll {
  position: absolute;
  top: 50%;
  left: 93px;
  transform: translate(0px, -50%);
  opacity: 0;
  transition: opacity 0.3s ease 0.5s, left 0.3s ease 0.5s;
}

.logo__image._header-scroll .logo__image-name {
  animation: logo-name-scroll 0.3s linear;
  left: 20px;
}

.logo__image._header-scroll {
  opacity: 0;
  height: 50px;
}

.header__logo._header-scroll .logo__image-scroll {
  opacity: 1;
  left: 0;
  top: 50%;
  animation: logo-image-scroll 0.3s linear 0.8s;
}

.logo__image-scroll-content {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: blue;
}

@keyframes logo-name-scroll {
  0% {
top: 50%;
left: 0px;
  }

  50% {
top: 50%;
left: 20px;
  }

  100% {
top: 50%;
left: 20px;
opacity: 0;
  }
}

@keyframes logo-image-scroll {
  0% {
top: 50%;
left: 0px;
  }

  50% {
top: 50%;
left: 0px;
  }

  100% {
top: 50%;
left: 0px;
opacity: 0;
  }
}

.header__content {
  height: 200vh;
}

<header class="header">
  <div class="header__logo">
<div class="logo__image">
  <div class="logo__image-name"></div>
  <div class="logo__image-circle"></div>
</div>
<div class="logo__image-scroll">
  <div class="logo__image-scroll-content"></div>
</div>
  </div>
</header>
<div class="header__content"></div>