css实现动态旋转

需求：刷新按钮点击后，动态旋转

1.代码

.refresh-animation {
    animation: rotate 4s infinite;
    -webkit-animation: rotate 1s infinite; /*Safari and Chrome*/ 
}

@keyframes rotate {
    0%{
        transform:rotate(0deg);
        -ms-transform:rotate(0deg);     /* IE 9 */
        -moz-transform:rotate(0deg);    /* Firefox */
        -o-transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        -ms-transform:rotate(360deg);   /* IE 9 */
        -moz-transform:rotate(360deg);  /* Firefox */
        -o-transform:rotate(360deg);    
    }
}

@-webkit-keyframes rotate {
    0%{
        -moz-transform:rotate(0deg);
    }
    100%{
        -moz-transform:rotate(360deg);
    }
}

$(this).addClass("refresh-animation");
$(this).removeClass("refresh-animation");

2.讲解

[animation](http://www.w3school.com.cn/cssref/pr_animation.asp)
[transform](http://www.w3school.com.cn/cssref/pr_transform.asp)
注意animation的animation-name属性(此例:rorate)必须与@keyframes ratote{}中的 ratote一致