<!DOCTYPE html> <html> <head> <style> .anim-show { width:100px; height:100px; background:red; position:relative; animation-name:mymove; animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */ /* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */ -webkit-animation-name:mymove; -webkit-animation-duration:2s;/* 5s表示执行动画的时间，0或不写则无动画效果 */ } @keyframes mymove /* 对应animation-name，里面为执行的动画*/ { from {top:200px;}/*执行动画的初始位置*/ to {top:0px;}/*动画结束位置*/ 0% { opacity: 0.1; /*初始状态 透明度为10%*/ } 50% { opacity: 0.5; /*中间状态 透明度为50%*/ } 100% { opacity: 1; /*结尾状态 不透明*/ } } @-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/ { from {left:200px;}/*执行动画的初始位置*/ to {left:0px;}/*动画结束位置*/ } </style> </head> <body> <div style="height: 2000px;"> </div> <div class="anim"> 11111 </div> <div style="height: 2000px;"> </div> <div class="anim"> 11111 </div> <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script> <script> //滚动监控添加动画 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 - 50 ){ anim.eq(i).addClass("anim-show"); } }) } </script> </body> </html>