一次完整运动分为四个阶段:第一个阶段,左上移动至右上,旋转90°,宽高缩小;第二个阶段,右上移动至右下,旋转180°,宽高回复;第三个阶段,右下移动至左下,旋转270°,宽高缩小;第四个阶段,左下移动至左上,旋转360°,宽高回复。
动画延迟时间差为负的半个动画时间。
{animation:party_ball2seaseinfinite;}
@keyframesparty_ball{
25%{
-webkit-transform:scale(.5)rotateZ(90deg);
transform:scale(.5)rotateZ(90deg);
top:0;
left:100%;
}
50%{
-webkit-transform:scale(1)rotateZ(180deg);
transform:scale(1)rotateZ(180deg);
top:100%;
left:100%;
}
75%{
-webkit-transform:scale(.5)rotateZ(270deg);
transform:scale(.5)rotateZ(270deg);
top:100%;
left:0;
}
100%{
-webkit-transform:scale(1)rotateZ(360deg);
transform:scale(1)rotateZ(360deg);
top:0;
left:0;
}
}


如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c57312.shtml