<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可视化区域加载</title>
</head>
<body>
<div id="showDiv"></div>
<style type="text/css">
#show Div{
width:500px;
height:350px;
background-color:red;
margin:1000px auto 0 auto;
}
@-webkit-keyframes fadeInLeft{
0%{
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
100%{
opacity:1;
-webkit-transform:none;
transform:none;
}
}
@keyframes fadeInLeft{
0%{
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
100%{
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
}
.fadeInLeft{
-webkit-animation-name:fadeInLeft;
animation-name:fadeInLeft;
-webkit-animation-duration:2s;
animation-duration:2s;
}
</style>
<script type="text/javascript">
function showDivs(){
var showId=document.getElementById("showDiv");
var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
var divTop=showId.getBoundingClientRect().top;
if(divTop <= clientsHeight){
showDiv.classList.add("fadeInLeft");
}
}
window.onscroll=showDivs;
</script>
</body>
</html>
你在css定义div时 书写错误