Tengo un CSS y JS. Es simplemente cuando me deslizo hacia abajo a la página, mi logotipo viene de la izquierda con opacidad 0. Luego, cuando vuelvo a la parte superior, retrocede y la opacidad es 0. Funciona en computadoras y teléfonos Android. Pero en dispositivos iOS no funciona. ¿Qué hay de malo en mi código?

Aparece el logotipo después de deslizar hacia arriba, se mueve hacia la izquierda pero no desaparece. Gracias por las respuestas.

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