cssはピクチャアニメーション効果を実現する

需要
プロジェクトにはメッセージセンターがあり、メッセージがあるときは、小さな鈴のアイコンを2回振って、現在の情報を提示することができます.
インプリメンテーションプロセス
cssを書く
cssのkeyframeプロパティを使用して、animationに合わせます.

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

js配合
私たちが実現した効果は、入ってくると2回揺れ、データが更新されてから2回揺れなければならない.jsは以下の通りです.

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

タイマーをセットする目的は、次回も揺れ続けるようにし、取り外さないと揺れないようにすることです.