css(1):

css3的动画帧实现旋转

@keyframes tea_arrow {
    0%{transform: rotateZ(180deg);}
    25%{transform: rotateZ(135deg);}
    50%{transform: rotateZ(90deg);}
    75%{transform: rotateZ(45deg);}
    100%{transform: rotateZ(0deg);}
@keyframes tea_arrow1 {
    0%{transform: rotateZ(0deg);}
    25%{transform: rotateZ(45deg);}
    50%{transform: rotateZ(90deg);}
    75%{transform: rotateZ(135deg);}
    100%{transform: rotateZ(180deg);}
.tea_arrowDown{animation: tea_arrow 0.5s linear;transform-origin:center center;transform: rotateZ(0deg);}
.tea_arrowUp{animation: tea_arrow1 0.5s linear;transform-origin:center center;transform: rotateZ(180deg);}
css(2):
css3过渡属性加旋转属性
.tea_arrowDown{transition: 0.8s;transform-origin:center center;transform: rotateZ(0deg);}
.tea_arrowUp{transition: 0.8s;transform-origin:center center;transform: rotateZ(180deg);}
用jq只是判断一下是否包含所发生动画的类
    ~(function() {
        var btn = $(".tea_getBtn");
        var aniCon = $(".tea_getDetail");
        var arrow = $(".tea_arrow");
        btn.on("click",function() {
            if(!arrow.hasClass("tea_arrowDown") && !arrow.hasClass("tea_arrowUp") ) {
                arrow.addClass("tea_arrowUp");
            }else if(arrow.hasClass("tea_arrowUp") ){
                arrow.removeClass("tea_arrowUp").addClass("tea_arrowDown");
            }else if(arrow.hasClass("tea_arrowDown") ){            
                arrow.removeClass("tea_arrowDown").addClass("tea_arrowUp");
    })();