利用jquery制作滚动到指定位置触发动画
利用CSS3的animation动画特性来完成的，对IE的兼容性不是太好，适用与手机端。
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>sas</title>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<styletype="text/css">
*{margin:0px;padding:0px;}
.gs{
position:relative;
top:800px;
background-color:#099;
left:150px;width:80px;
}
.xz{
animation:roate2s;
animation-fill-mode:forwards;
animation-direction:alternate;
}
@keyframesroate{
from{transform:rotate(0deg);
width:100px;
height:100px;}
to{transform:rotate(360deg);
width:200px;
height:200px;
}}
.xs{width:50px;float:left;height:30px;background-color:#F90;position:fixed;left:700px;top:0px;}
</style>
</head>
<body>
<scripttype="text/javascript">
functiongdjz(div,cssname,offset){
vara,b,c,d;
d=$(div).offset().top;
a=eval(d+offset);
b=$(window).scrollTop();
c=$(window).height();
if(b+c>a){
$((div)).addClass((cssname));
}
}
$(document).ready(function(e){
$(window).scroll(function(){
gdjz("#dh",'xz',500);
}
/*vara,b,c;
a=$("#dh").offset().top;//元素相对于窗口的距离
b=$(window).scrollTop();//监控窗口已滚动的距离;
c=$(document).height();//整个文档的高度
d=$(window).height();//浏览器窗口的高度*/
/*if(d+b>a+100){
$("#dh").addClass("xz");
}
*/
);
});
</script>
<divstyle="height:1800px;background-color:#999;width:500px;float:left;">
<divid="dh"class="gs">触发动画</div>
</div>
<divclass="xs"></div>
</body>
</html>