The elements are fading in only when i refresh the page. But i want them to fade-in when scroll down the page.

Here is my 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);
               }
            }```

When i scroll down the Elements(images and texts) are already there they don not fade in when i scrll down but when i refresh the page while my cursor is on that section only then i can see the elements fade_in There is lot of space between the elements also.