'My CSS animations don't work on iOS devices

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


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lior Ben

Related Questions