css實現圖片動畫效果

需求

項目里有個消息中心，當有消息的時候，小鈴鐺圖標可以晃兩下，提示當前有信息。

實現過程

書寫css

使用css的keyframe屬性，配合animation。

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

js配合

我們實現的效果應該是一進來的時候 晃兩下，數據更新之后晃兩下。js如下：

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

設置定時器的目的是讓下次還能繼續晃動，如果不拿掉，下次就不會晃動了。