Adding css animation when it is scrolled to the CLASS ELEMENT [duplicate]

It's surely simple question but i didn't find what i want. I need css animation (which is class) to add to class element when user scroll to it's Y position (be able to see it).

For example i have one class called AnimationClass

Here is my css animation:

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

So when user scroll to element Y position add this class to element class. I don't want to use if (scroll <= 500) .

Update: U wrote down that there is a lot of similar question. But i need CLASS element to animate, not ID. I don't know how to write it in javascript.