Как я могу последовательно реализовать противоречащие классы css в одной функции javascript, чтобы создать эффект постепенного появления/исчезновения на странице?

Я пытаюсь заставить веб-страницу отображать только один элемент за раз, когда элемент полностью находится в окне. Когда элемент не находится в окне, я хочу, чтобы он исчезал, а когда он полностью появляется в поле зрения, я хочу, чтобы он исчезал.

Как новичок, единственное, о чем я мог думать, когда делал это, это полностью удалить предыдущий класс и добавить противоположный, но независимо от того, как я пытался это сделать (в основном просто перемещая мои элементы[i].style.animation = 'none' или null и изменение синтаксиса операторов if.)

Мой javascript (в файле HTML):

<script>
window.onscroll=function(){fade()};
    function fade(){
      var elements = document.querySelectorAll('.block1,.block2');
      for (var i = 0; i < elements.length; i++) {
        if (elements[i].offsetTop>window.pageYOffset && elements[i].offsetTop+elements[i].clientHeight<window.pageYOffset+window.innerHeight){
          elements[i].style.animation='none';
          elements[i].style.animation=null;
          elements[i].className+ = " pageFade";
          elements[i].style.opacity = "1";
        }
        else{
          elements[i].style.animation='none';
          elements[i].style.animation=null;
          elements[i].className+ = " outFade";
          elements[i].style.opacity = "0";
        }
      }
    }
</script>

Мой CSS

.pageFade{
  animation:reveal 1.5s ease-in-out 1;
  -webkit-animation-name:reveal 1.5s ease-out 1;
}

@keyframes reveal{
  0%{opacity:0}
  100%{opacity:1}
}

.outFade{
  animation:unreveal 1.5s ease-in-out 1;
  -webkit-animation-name:unreveal 1.5s ease-out 1;
}

@keyframes unreveal{
  0%{opacity:1}
  100%{opacity:0}
}

(-вебкит- исключен)

В действии только мои команды непрозрачности, мои анимации "затухания" не работают... Есть какие-нибудь советы, что мне попробовать?