My CSS animations don't work on iOS devices-CodePudding

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

CodePudding user response：

You need to add -webkit- prefixes to your transforms. On iOS, all browsers use safari webkit (because they are based on uiwebview), and currently iOS webkit only supports transforms with a prefix.
What you are seeing is that the transform is always 0 throughout the animation because the non-prefixed selector is not used.

CodePudding user response：

I agree with Lior Ben. If you need help with web kits I recommend using a good web kit generator.

Personally I use: https://autoprefixer.github.io/