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)
}

设置定时器的目的是让下次还能继续晃动，如果不拿掉，下次就不会晃动了。