<! DOCTYPE HTML > < HTML > < head > < style > .anim-Show { width : 100px ; height : 100px ; background : Red ; position : relative ; Animation-name : mymove ; Animation-DURATION : 5S ; / * 5S that the implementation of the animation time, do not write 0 or no animation * / / * compatible debugging if animation-name execution, -wekit-animation-name is not executed * / -webkit-animation-name :mymove ; -webkit-Animation-DURATION : 2S ; / * 5S represented animation execution time, write 0 or no animation * / } @keyframes mymove / * corresponding to the animation-name, which is performed by the animation * / { from {Top : 200px ; } / * initial position performs animation * / to { Top : 0px ; } / * end of the animation position * / 0% { opacity : 0.1 ; / * initial state of opacity to 10% * / } 50% { Opacity : 0.5; / * Intermediate transparency state% 50 * / } 100% { Opacity : . 1 ; / * end of the opaque state * / } } @ -webkit-keyframes mymove / * corresponds -webkit-animation-name, which is performed by the animation * / { from {left : 200px ; } / * execute the initial position of the animation * / to { left : 0px ; } / * end of the animation location * / } </ 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> AnimvarScroll monitoring add animation// = $(".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>