Trexwrapper es un contenedor para la imagen y el nombre de trex. Hice esto para poder moverlo juntos. Mi idea era desplazarme hacia abajo y hacer que Trexwrapper apareciera en mi pantalla. La función funciona. Pero cuando me desplacé hacia abajo, restableció inmediatamente el posicionamiento que apliqué con ese fotograma clave de animación. Quiero que esta posición se quede.
let TRex = document.querySelector("#TRex-Wrapper"); window.addEventListener("scroll", function(e) { if (window.pageYOffset > 500) { TRex.classList.add("TrexMove"); } if (window.pageYOffset < 200) { TRex.classList.remove("TrexMove"); } }); #TRex-Wrapper { width: 660px; height: 350px; position: absolute; transform: translateX(750px); /*Initial Position of the Treximage + Trexname*/ } .TrexMove { animation: TrexAppearance 1s; } @keyframes TrexAppearance { 0% {} 100% { transform: translateX(0); /*The new position i gave the trexwrapper (Trex + trexname) which immediatly resets right after the animation played out*/ } } <div id="TRex-Wrapper"> <img src="https://via.placeholder.com/100" alt="Tyrannosaurus Rex" id="TyrannosaurusRex"> <p id="T-rexP">Tyrannosaurus Rex</p> </div>