欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    一次完整运动分为四个阶段:第一个阶段,左上移动至右上,旋转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