Edit in JSFiddle

$(function() {
  var element = $(".element");
  var i = 0; //fix for first scroll
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
    	i = 1;
      element.removeClass('scrolled-out').addClass("scrolled").addClass('stoped');
    } else {
      if (i > 0) {
        element.removeClass("scrolled").addClass('scrolled-out').removeClass('stoped');
      } 
    }
  });
});
<div class="element">
</div>
<div class="wrapper">
</div>
@keyframes from-top {
  from {
    background-color: red;
    top: 100px;
    opacity: 0;
  }
  to {
    background-color: yellow;
    top: 200px;
    opacity: 1;
  }
}

@keyframes from-bottom {
  from {
    background-color: yellow;
    top: 200px;
    opacity: 1;
  }
  to {
    background-color: red;
    top: 100px;
    opacity: 0;
  }
}

.element {
  position: fixed;
  left: 200px;
  width: 200px;
  height: 200px;
  display: block;
}

.stoped {
  background-color: yellow;
  top: 200px;
  opacity: 1;
}

.scrolled {
  animation-name: from-top;
  animation-duration: 4s;
}

.scrolled-out {
  animation-name: from-bottom;
  animation-duration: 4s;
}

.wrapper {
  height: 2000px;
}