css實作圖檔動畫效果

需求

項目裡有個消息中心，當有消息的時候，小鈴铛圖示可以晃兩下，提示目前有資訊。

實作過程

書寫css

@keyframes ringing
{
    from  {transform:rotate(-30deg);}
    to  {transform:rotate(30deg);}
}
.xxAnimation{
    animation: ringing 0.3s linear 0s 5 alternate;
}
           

js配合

if(data != 0){
    $("#messageMv").addClass("xxAnimation");
    setTimeout(function () {
        $("#messageMv").removeClass("xxAnimation");
    },1500)
}