首先实现淡入的动画

CSS代码如下：

@keyframes float {    
from { position: relative;       margin-top:200px;        opacity: 0;    }    
to {  position: relative;        margin-top: 50px;        opacity: 1;    }
}

接下来用JS判断当前滚动的位置并加入动画

window.onscroll = function() {//检测鼠标滚轮距离顶部位置var top = document.documentElement.scrollTop || document.body.scrollTop;console.log(top);//页面滚动时可以得到滚动的距离可以根据这个数值来决定何时给div绑定动画//要设置到DIV刚显示出来时给div添加动画if(top > （box.offsetTop-box.offsetHeight）) { box.style.animation = "key 2s"//添加动画  }}