animate 添加入场动画

 屏幕滚动到此处，div添加动画效果。

<div class="anim anim-2" > </div>

 

$(function(){
  // 出场动画
  var anim = $(".anim");
  setTimeout(function(){//规避页面加载不完整高度获取异常
    $(window).scroll(function() {
        roll();
      })
      $(window).resize(function() {
        roll();
      })
      roll();
  },6)
  function roll() { //滚动执行动画
    var oHeight = $(window).height();
    var ScrVal = $(window).scrollTop();
    anim.each(function(i) {
      if (ScrVal + oHeight > anim.eq(i).offset().top + 100 ){
        anim.eq(i).addClass("anim-show");
      }
    })
  }
})

 

.anim-1,
.anim-2{
  -webkit-transform: translateY(100px) translateX(0);
  -moz-transform: translateY(100px) translateX(0);
  transform: translateY(100px) translateX(0);
  opacity: 0;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.anim-1 {
  -webkit-transition: transform .8s,opacity .8s;
  -moz-transition: transform .8s,opacity .8s;
  -o-transition: transform .8s,opacity .8s;
  transition: transform .8s,opacity .8s;
}
.anim-2 {
  -webkit-transition: transform 1s,opacity 1s;
  -moz-transition: transform 1s,opacity 1s;
  -o-transition: transform 1s,opacity 1s;
  transition: transform 1s,opacity 1s;
}

.anim-show {
  -webkit-transform: translateY(0px) translateX(0);
  -moz-transform: translateY(0px) translateX(0);
  transform: translateY(0px) translateX(0);
  opacity: 1;
}
.anim-list .anim-1 {
  -webkit-transition: transform .5s,opacity .5s;
  -moz-transition: transform .5s,opacity .5s;
  -o-transition: transform .5s,opacity .5s;
  transition: transform .5s,opacity .5s;
}
.anim-list .anim-2 {
  -webkit-transition: transform .6s,opacity .6s;
  -moz-transition: transform .6s,opacity .6s;
  -o-transition: transform .6s,opacity .6s;
  transition: transform .7s,opacity .7s;
}