Css动画

19 Jun 2016 in 知识 on Css

CSS3 自定义动画（animation）

旋转动画

/*旋转动画部分*/
#rotateImg {
    position:absolute;
    margin-top:5px;
    -webkit-animation: rotateAnimation 15s infinite linear;
    -moz-animation: rotateAnimation 15s infinite linear;
    -o-animation: rotateAnimation 15s infinite linear;
    animation: rotateAnimation 15s infinite linear;
}
 
@keyframes rotateAnimation {
    form {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    
    to {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);    
    }
}