rotate点击来回旋转和同一事件绑定解决同一class写法

最近写了个刷新ico，发现用css3的rotate单纯加上样式transform: rotate(360deg);，

每次点击它会来回旋转，而不是一个方向的旋转。

在这就用了个新的css样式解决，需要兼容就自己加。

.ico.active{
    animation-name: rotate; 
    animation-duration: .5s; 
    animation-iteration-count: 1; 
    animation-timing-function: linear;
}

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

同一事件绑定解决同一class写法；

因为不取消当前这个class，就只能执行一次。还是以上面旋转做样式。

上面每次旋转完需要0.5s，我就0.5s之后取消这个事件，

就能顺利的重复执行添加这个active

$(".ico").click(function(event) {

$(this).addClass('active');
        setTimeout(function(){
            $(".ico-sx").removeClass('active');
        },500)
})