I have a CSS and JS. Its simply when I slide down to page my logo coming from left with opacity 0. Then when I came back to top again its going back and opacity being 0. Its working on computer and android phones. But on iOS devices its doesn't work. What is wrong with on my code?

Logo is coming after I slide to top it moves to the left but does not disappear. Thank you for responses .

JS:

const handleToggle = (e) => {
    let brands = document.getElementsByClassName("stickyBrand"); //Its my logo.
    if (e) {
      Array.from(brands).forEach((el) => {
        el.classList.add("fadeInLeft");
        el.classList.remove("fadeOutLeft");
      });
    } else {
      Array.from(brands).forEach((el) => {
        el.classList.add("fadeOutLeft");
        el.classList.remove("fadeInLeft");
      });
    }
  };

CSS:

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@-webkit-keyframes fadeOutAnimationOperaSafari {
  0% {
    opacity: 0 !important;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 1 !important;
    -webkit-transform: translateX(-50px);
  }
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
  }
}