Edit in JSFiddle

$(document).ready(function() {
  var direction = 'fadeup,fadedown,fadeleft,faderight'.split(',');
	direction.forEach(function(item){ // reset
  	$('.'+item).removeClass(item).addClass('-'+item);
  });
  var effect = function(){
  	var bottom_of_window = $(window).scrollTop() + $(window).height();
    $('.-'+direction.join(',.-')).each( function(i){
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      direction.forEach(function(item){
        if( $(this).hasClass('-'+item) &&
           bottom_of_window > bottom_of_object 
          ) { 
          $(this).addClass(item);
        }
      }, this);
    }); 
  };
  $(window).scroll(effect);
  effect();
});

<h1>
Scroll down
</h1>

<div class="box faderight">
  Hello
</div>
<div class="box fadedown">
  Hello
</div>
<div class="box fadeup">
  Hello
</div>
<div class="box fadeleft">
  Hello
</div>

<div class="container">
  <div class="box faderight">
    Hello
  </div>
  <div class="box fadedown">
    Hello
  </div>
  <div class="box fadeup">
    Hello
  </div>
  <div class="box fadeleft">
    Hello
  </div>
</div>

body {
  color: #000;
  background-color: #eee;
  margin: 0;
  padding: 1vw 1vh;
  height: 160vh;
}

.container {
  width: 90%;
  margin: 0 auto;
  margin-top: 99vh;
  text-align: center;
}

.box {
  float: left;
  position: relative;
  opacity: 0;
  text-align: center;
  border: 3px solid black;
  background: #ccc;
  width: 16vw;
  height: 12vw;
  padding: 0.5vh 0.5vw;
  margin: 0 0 0 1vw;
  transition: all 1s;
}

.box:hover {
  color: #fff;
  font-weight: bold;
  margin-top: 1em;
  background: rgba(30, 200, 30, 0.5);
  box-shadow: 0 1em 0.8em -0.5em rgba(60, 60, 60, 0.3);
}

.fadeup {
  opacity: 0;
  animation: fadeup 1s;
  animation-fill-mode: forwards;
}

.fadedown {
  opacity: 0;
  animation: fadedown 1s;
  animation-fill-mode: forwards;
}

.fadeleft {
  opacity: 0;
  animation: fadeleft 1s;
  animation-fill-mode: forwards;
}

.faderight {
  opacity: 0;
  animation: faderight 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeup {
  from {
    opacity: 0;
    position: relative;
    top: 4vh;
    }

  to {
    opacity: 1;
    position: relative;
    top: 0;
    }
}

@keyframes fadedown {
  from {
    opacity: 0;
    position: relative;
    bottom: 4vh;
  }

  to {
    opacity: 1;
    position: relative;
    bottom: 0;
    }
}

@keyframes fadeleft {
  from {
    opacity: 0;
    position: relative;
    left: 4vw;
  }

  to {
    opacity: 1;
    position: relative;
    left: 0;
    }
}

@keyframes faderight {
  from {
    opacity: 0;
    position: relative;
    right: 4vw;
  }

  to {
    opacity: 1;
    position: relative;
    right: 0;
    }
}