Fade in text animation?

Site URL: https://www.brayand.co/new-services

In each section I would like the text to fade in as soon as the section is reached. 
I added some CSS for each section, but instead of fading in once the section is reached, it fades in on the page load. 

Here is the CSS:

section[data-section-id="62e2bac3984277106d805442"]
.sqs-block-html, .Intro .sqs-row {
  animation: fade-text-anim 2s ease;
}

@keyframes fade-text-anim {
  0% {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}


How can I edit this so it only fades in once the section is reached?

4 hours ago, jesseatkinson said:

Site URL: https://www.brayand.co/new-services

In each section I would like the text to fade in as soon as the section is reached. 
I added some CSS for each section, but instead of fading in once the section is reached, it fades in on the page load. 

Here is the CSS:

section[data-section-id="62e2bac3984277106d805442"]
.sqs-block-html, .Intro .sqs-row {
  animation: fade-text-anim 2s ease;
}

@keyframes fade-text-anim {
  0% {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}


How can I edit this so it only fades in once the section is reached?

In order to capture when the section is reach on your viewport, we need to implement some js code to observer it

How do I do that?