用JavaScript实现页面滚动到div区域div以动画方式出现CSS动画
页面滚动到一块区域，改区域以动画方式出现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> img { width: 1000px; height: 800px; } .box { width: 500px; height: 500px; line-height: 500px; text-align: center; font-size: 50px; color: red; border: 1px solid; } /*设置动画*/ @keyframes key { 0% { margin-left: -50px; opacity: 0; } 50% { margin-left: 50px; opacity: .5; } 100% { margin-left: 0; opacity: 1; } } </style> </head> <body> <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" /> <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" /> <div class="box">div以动画方式出现</div> <script> var box = document.querySelector(".box"); //用js检测鼠标滚轮距离顶部位置来给div添加动画 document.onscroll = function() { //检测鼠标滚轮距离顶部位置 var top = document.documentElement.scrollTop || document.body.scrollTop; console.log(top); //数值要设置到DIV显示出来时再给div添加动画要不就看不到动画了 if(top > 1000) { box.style.animation = "key .25s linear 2"//添加动画 } } </script> </body> </html>