为什么粽子不抖动
<!doctype>
<HTML>
<head>
<title>粽情端午</title>
<!--<meta charset="utf-8">-->
</head>
<style type="text/css">
@-webkit-keyframes rock
{
0%{ transform:rotate(0deg)}
10%{transform:rotate(3deg)}
20%{transform:rotate(-3deg)}
30%{transform:rotate(2deg)}
40%{transform:rotate(-2deg)}
50%{transform:rotate(1deg)}
60%{transform:rotate(-1deg)}
70%{transform:rotate(0deg)}
100%{transform:rotate(0deg)}
}
*{
padding:0;
margin:0;
}
body
{
background:#000;
min-width:1200px;
min-height:600px;
}
.main
{
width:1200px;
height:600px;
background:#000 url(img/bg.jpg);
position:absolute;
left:50%；
top:50%；
overflow:hidden;
}
.c_zongzi_box
{
width:312px;
height:305px;
position:absolute;
left:700px;
top:184px;
}
.c_zongzi_box_rock
{
-webkit-animation:rock 2s infinite;
}
.c_zongzi
{
width:312px;
height:305px;
background:url(img/zz.png);
transition:all 1s;
}
.c_zongzi_out
{
opacity: 1;
-webkit-transform:scale(.5);
}
.c_shengzi_1
{
width:218px;
height:180px;
background:url(img/line_1.png);
position:absolute;
left:10px;
top:120px;
z-index:999;
cursor:pointer;
}
.c_shengzi_2
{
width:219px;
height:159px;
background:url(img/line_2.png);
position:absolute;
left:10px;
top:158px;
}
.c_shengzi_3
{
width:264px;
height:117px;
background:url(img/line_3.png);
position:absolute;
left:10px;
top:220px;
}
.c_shengzi_4
{
width:288px;
height:56px;
background:url(img/line_4.png);
position:absolute;
left:10px;
top:260px;
}
.c_zongzirou
{
width:288px;
height:206px;
position:absolute;
left:50px;
top:34px;
background-size:288px 206px;
background:url(img/zzr_1.png);
z-index:110;
opacity:0;
transition:all 1s;
transform-origin:top center;
transform:scale(.8);
}
.c_zongzirou_in
{opacity:1;
transform:scale(1);}
.c_zuoye
{
width:114px;
height:266px;
position:absolute;
left:0px;
top:-30px;
background:url(img/leaf_left.png);
z-index:1;
opacity:0;
transform-origin:left bottom;
transition:all 1s;
}
.c_zuoye_in
{opacity:1;
transform:rotate(-5deg);
}
.c_zuoye_out
{opacity:0;
transform:rotate(-15deg);
}
.c_youye
{
width:318px;
height:338px;
position:absolute;
left:80px;
top:-60px;
background:url(img/leaf_right.png);
z-index:111;
opacity:0;
transition:all 1s;
transform:scale(.8);
}
.c_youye_in
{opacity:1;
transform:rotate(5deg) scale(.8);}
.c_youye_out
{opacity:1;
transform:rotate(15deg) scale(.8);}
.c_diye
{
width:618px;
height:468px;
position:absolute;
left:-150px;
top:-45px;
background:url(img/leaf_expand.png);
z-index:99;
opacity:0;
transition:all 1s;
}
.c_diye_in
{opacity:1;}
.c_t_1
{
width:180px;
height:100px;
background:url(img/t_jixiang.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-50px;
z-index:200;
transform:scale(.8);
transform-origin:center center;
opacity:0;
}
.c_t_in
{opacity:1;}
.c_t_2
{
width:180px;
height:100px;
background:url(img/t_ruyi.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-50px;
z-index:200;
transform:scale(.8);
transform-origin:center center;
opacity:0;
}
.text
{
position:absolute;
width:400px;
height:370px;
left:180px;
top:140px;
font-size:14px;
line-height:20px;
color:#333;
opacity:0;
display:none;
transition:all 1s;
}
.text .caption
{
width:400px;
height:240px;
background:url(img/caption.png) no-repeat;
margin-left:40px;
}
.text .to
{
width:400px;
margin-top:10px;
margin-left:40px;
transition:all 1s .5s;
}
.text .msg
{
width:400px;
margin-top:10px;
margin-left:40px;
transition:all 1s 1s;
}
.text .from
{
width:400px;
margin-top:10px;
margin-left:40px;
text-align:right;
transition:all 1s 1.5s;
}
.text_in
{ display:block;
opacity:1;
}
.text_in .to,
.text_in .msg,
.text_in .from
{ opacity:1;
margin-left:0px;
}
.c_zongzirou_view_1
{background-image:url(img/zzr_1.png);
}
.c_zongzirou_view_2
{background-image:url(img/zzr_2.png);
}
.c_zongzirou_view_3
{background-image:url(img/zzr_3.png);
transition:all 0;
}
.c_zongzirou_view_4
{background-image:url(img/zzr_4.png);
transition:all 0;
}
.c_zongzirou_view_0
{
transition:all 0;
background-image:url(img/zzr_1.png);
transform:rotateY(180deg);
}
.c_t_view_0
{transform:scale(.8);}
.c_t_mirror_0
{display:none;}
.c_t_view_2
{transform:scale(.8) rotateY(30deg) translate(-50px,0) rotate(8deg) ;}
.c_t_mirror_2
{transform:scale(.7) rotateY(70deg) translate(283px,-15px) rotate(-8deg);}
.c_t_view_3
{transform:scale(.75) rotateY(49deg) translate(-94px,0) rotate(15deg);}
.c_t_mirror_3
{transform:scale(.75) rotateY(49deg) translate(118px,0) rotate(-15deg);}
.c_t_view_4
{transform:scale(.6) rotateY(50deg) translate(196px,10px) rotate(24deg);}
.c_t_mirror_4
{transform:scale(.8) rotateY(30deg) translate(58px,10px) rotate(-5deg);}
</style>
<script type="text/css">
var g=function(id)
{return document.getElementById(id);}
var Timeline=function(){-}
/*{this.order=[];
this.order=function(timeout,func,log)
{this.order.push({
timeout:timeout,
func:func,
log:log,
});
}
this.start=function()
{
for(s in this.order)
{
(function(me)
{
var fn=me.func;
var timeout=me.timeout;
var log=me.log;
setTimeout(fn,timeout);
setTimeout(function(){console.log('time->',timeout,'log->',log);},timeout);
}
)(this.order[s])
}
}
}*/
/*初始场景*/
var s1=new Timeline();
/*粽子展开的场景*/
var s2=new Timeline();
/*粽子旋转的场景*/
var s3=new Timeline();
s1.add(1,function()
{g('c_zongzi_box').className='c_zongzi_box c_zongzi_box_rock';
g('c_chengzi').onclick=function()
{s2.start();
g('c_shengzi').onclick=function(){}
}
})
s2.add(1,function()
{g('c_zongzi_box').className='c_zongzi_box ';})
/*s2.add(100,function()
{g('c_zognzi_box').className='c_zongzi_box ';})*/
s1.start();
</script>
<body>
<div class="main">
<div class="c_zongzi_box" id="c_zongzi_box">
<div class="c_zongzi " id= "c_zongzi"></div>
<div class="c_shengzi_1" id="c_shengzi"></div>
<div class="c_zuoye "></div>
<div class="c_zongzirou "></div>
<div class="c_youye "></div>
<div class="c_diye "></div>
<div class="c_t_1 "></div>
<div class="c_t_2 c_t_in c_t_view_0 "></div>
</div>
<div class="text text_in">
<div class="caption"></div>
<div class="to">小伙伴们</div>
<div class="msg">在端午节来临之际，我给大家送来心意，希望大家找到真正的喜乐和满足</div>
<div class="from">小慧</div>
</div>
</div>
</body>
</HTML>
老师代码敲到这，实现的功能是粽子在抖动 ，鼠标放上去后粽子不再抖动，可是为什么我代码敲到这粽子一开始就不会动
