Javascript 如何在第二次单击按钮时重复@keyframes？

我想在第二次单击某个按钮时重复@Keyframe动画，但效果只有一次

    <script>
        $(document).ready(function(){
            $('#btn_commit').click(function(){
                $('#div_msg').css({"animation": "social-notices 4s"});
            });
        });
    </script>
    <style>
        @-webkit-keyframes social-notices{
            17% { left: 10px; opacity: 1; }
            83% { left: 10px; opacity: 1; }
            100% { left: 10px; opacity: 0; }
        }

        @keyframes social-notices{
            17% { left: 10px; opacity: 1; }
            83% { left: 10px; opacity: 1; }
            100% { left: 10px; opacity: 0; }
        }

        #div_msg{
            position: absolute;
            width: 300px; 
            height: 40px; 
            background-color: #c91f37; 
            color: #ffffff; 
            border-radius: 4px; 
            transition: 0.2s ease 0s;
            cursor: pointer;
            transition-duration: 0.2s;
            left: -310px;
        }
    </style>

$（文档）.ready（函数（）{
$（'#btn_commit'）。单击（函数（）{
$（'div_msg'）.css（{“动画”：“社会通知4s”}）；
});
});
@-webkit为社会公告设置关键帧{
17%{左：10px；不透明度：1；}
83%{左：10px；不透明度：1；}
100%{左：10px；不透明度：0；}
}
@社会公告的关键帧{
17%{左：10px；不透明度：1；}
83%{左：10px；不透明度：1；}
100%{左：10px；不透明度：0；}
}
#味精司{
位置：绝对位置；
宽度：300px；
高度：40px；
背景色：#c91f37；
颜色：#ffffff；
边界半径：4px；
过渡：0.2秒到0秒；
光标：指针；
过渡时间：0.2s；
左：-310px；
}

---

如何解决此问题？

您可以将“显示”设置为“无”，并将其恢复到以前的模式

---

您还可以为动画创建类，然后在单击元素时删除/添加该类

为其添加一个新类，其中该类具有此动画计时功能：

.repeat-inf {
  animation-iteration-count: infinite;
}

并通过以下方式更改jQuery：

$(document).ready(function(){
    $('#btn_commit').click(function(){
        $('#div_msg').addClass("repeat-inf");
    });
});

如果CSS代码不适用于您，请使用完整的

动画

CSS规则，因为大多数浏览器不支持速记