SOURCE

function showDiv() {
  var oDiv = document.getElementById('showDiv');

  // window.innerHeight IE9及以上  表示可视区域的距离
  var clientsHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  // getBoundingClientRect  表示当前元素离顶部的距离
  var top = oDiv.getBoundingClientRect().top;
  if (top < clientsHeight) {
    oDiv.classList.add("fadeInLeft");
  }
}

window.onscroll = function() {
  showDiv();
};

<div id="showDiv" class=""></div>

  #showDiv {
    width: 500px;
    height: 350px;
    background: dodgerblue;
    margin: 1000px auto 0;
  }

  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
   }
    100% {
      opacity: 1;d
      -webkit-transform: none;
      transform: none;
    }
  }

  /* @keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  } */

  .fadeInLeft {
    animation: fadeInLeft 2s ease;
    -webkit-animation: fadeInLeft 2s ease;
  }