SOURCE

$(document).ready(function() {
  //确定窗口动画
  var animation_elements = $.find('.animation-element');
  var web_window = $(window);
  //查看动画容器
  function check_if_in_view() {
    //获取当前窗口信息
    var window_height = web_window.height();
    var window_top_position = web_window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
    //迭代元素查看否在动画容器中
    $.each(animation_elements, function() {
      //获取元素信息
      var element = $(this);
      var element_height = $(element).outerHeight();
      var element_top_position = $(element).offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //检查这个当前容器是否可见
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        element.addClass('in-view');
      } else {
        element.removeClass('in-view');
      }
    });

  }
  //滚动检测
  $(window).on('scroll resize', function() {
    check_if_in_view()
  });
  //初始化加载
  $(window).trigger('scroll');
});

<div class="main-container">
  <div class="container">
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
    <div class="animation-element slide-left">
      <div class="list">
      </div>
    </div>
  </div>
</div>

.main-container {
  background: #fff;
  max-width: 1000px;
  margin: 25px auto 25px auto;
  position: relative;
}

.container {
  position: relative;
  padding: 25px;
}

.list {
  width: 100%;
  height: 200px;
  text-align: center;
  background-color: #eee;
  margin: 20px 0;
}

.animation-element {
  opacity: 0;
  position: relative;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}