Los elementos se desvanecen solo cuando actualizo la página. Pero quiero que desaparezcan cuando se desplace hacia abajo en la página.

Aquí está mi JS.

 ``` const service =document.querySelector('.service-intro'); const observer=new IntersectionObserver(entries =>{ entries.forEach(entry=>{ if(entry.isIntersecting){ document.querySelectorAll(".slide-in")[0].classList.add("from-left"); document.querySelectorAll(".slide-in")[1].classList.add("from-right"); } }) }) observer.observe(service);``` ** Here is my CSS code please help me out i have tried many things still not working** ``` #services{ font-family: 'Libre Baskerville', serif; } .columns img{ width: 50%; height: 50%; box-shadow: 10px 10px 4px rgb(51, 46, 46); } #h-secondary{ text-align: center; } .service-intro{ display: flex; gap: 0px; } .slide-in{ width: 200px; height: 200px; background-size: cover; } .from-left{ float: left; -webkit-animation: from-left 2s ease-in; } @-webkit-keyframes from-left{ 0%{ opacity: 0; -webkit-transform: translateX(-50px); } 55%{ opacity: 0.6; -webkit-transform: translateX(-25px); } 100%{ opacity: 1; -webkit-transform: translateX(0); } } .from-right{ -webkit-animation: from-right 2s ease-in; float: right; } @-webkit-keyframes from-right{ 0%{ opacity: 0; -webkit-transform: translateX(50px); } 100%{ opacity: 1; -webkit-transform: translateX(0); } }```

Cuando me desplazo hacia abajo, los Elementos (imágenes y textos) ya están allí, no se desvanecen cuando me desplazo hacia abajo, pero cuando actualizo la página mientras mi cursor está en esa sección, solo entonces puedo ver los elementos desaparecer. Hay mucho espacio entre ellos. los elementos también.