css的動畫是作用於div，給div加css動畫 例如div旋轉動畫

css部分

.zhuan1{
/*動畫名字為轉1   0.3秒一次  執行一次 停止*/
    animation:zhuan1 0.3s ease both;
/*等待0s開始*/
    animation-delay:0s;
/*過程勻速進行*/
    animation-timing-function: linear;
}
/*轉動畫 0%的時候執行角度為0deg 100%執行角度為180deg*/
@-webkit-keyframes zhuan1{
    0%{
        transform: rotate(0deg);
    }
    
 
100%{transform: rotate(180deg);}
}
.zhuan2{
/*動畫名字為轉 0.3秒一次  執行一次 停止*/
    animation:zhuan2 0.3s ease both;
/*等待0s開始*/
    animation-delay:0s;
/*過程勻速進行*/
    animation-timing-function: linear;
}
/*轉動畫 0%的時候執行角度為180deg 100%執行角度為0deg*/
@-webkit-keyframes zhuan2{
    0%{
        transform: rotate(180deg);
    }
    100%{transform: rotate(0deg);}
}
 

js部分

//導航字體移入移出顯示變色
function xianshibianse(){
    $(".li_").mouseenter(function(){
        $(this).css(‘color‘,‘#108EE9‘);
        //自定義了一個bs變量，bs是自定義屬性bs的值
        //下拉框顯示隱藏
        var bs = $(this).attr(‘bs‘); 
        $("#daohangxiala"+bs).css("display","block");
        //自定義一個class屬性樣式：動畫zhuan1和zhuan2，鼠標移入執行動畫1，刪除動畫2
 

        $(".abc"+bs).removeClass("zhuan2");
        $(".abc"+bs).addClass("zhuan1");
    })
    $(".li_").mouseleave(function(){
        $(this).css(‘color‘,‘white‘);
        var bs = $(this).attr(‘bs‘); 
        $("#daohangxiala"+bs).css("display","none");
        //自定義一個class屬性樣式：動畫zhuan1和zhuan2，鼠標移入執行動畫2，刪除動畫1
        $(".abc"+bs).removeClass("zhuan1");
        $(".abc"+bs).addClass("zhuan2");
    })

css的動畫