css3跳动

Date: 2015-03-07 |Cat: 栏目一

先定义跳动动作

@keyframes tiao_fly {
    0% {transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}
    100% {transform:translateX(0%) translateY(-0%) rotateZ(-20.5deg);}
}
@-webkit-keyframes tiao_fly {
    0% {-webkit-transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}
    100% {-webkit-transform:translateX(0%) translateY(-0%) rotateZ(-20.5deg);}
}
@-moz-keyframes tiao_fly {
    0% {-moz-transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}
    100% {-moz-transform:translateX(0%) translateY(-0%) rotateZ(-20.5deg);}
}
@-ms-keyframes tiao_fly {
    0% {-ms-transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}
    100% {-ms-transform:translateX(0%) translateY(-0%) rotateZ(-20.5deg);}
}
@-o-keyframes tiao_fly {
    0% {-o-transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}
    100% {-o-transform:translateX(0%) translateY(-0%) rotateZ(-20.5deg);}
}
@keyframes tiao_fly {
    0% {transform:translateX(0%) translateY(-15%) rotateZ(-20.5deg);}
    100% {transform:translateX(0%) translateY(-0%) rotateZ(-20.5deg);}
}

然后针对div进行animate控制

.div{

     position: absolute;

    animation: tiao_fly 0.2s 0s alternate infinite;
     -webkit-animation: tiao_fly 0.2s 0s alternate infinite;
     -moz-animation: tiao_fly 0.2s 0s alternate infinite;
     -ms-animation: tiao_fly 0.2s 0s alternate infinite;
     -o-animation: tiao_fly 0.2s 0s alternate infinite;
     transform: rotateZ(-20.5deg);
     -webkit-transform: rotateZ(-20.5deg);
     -moz-transform: rotateZ(-20.5deg);
     -ms-transform: rotateZ(-20.5deg);
     -o-transform: rotateZ(-20.5deg);

}


赣ICP备12006079号