javascript-第二次单击按钮时如何重复@keyframes？

我想在第二次单击按钮时重复@keyframne动画,但这只作用一次.

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

我怎么解决这个问题？

解决方法:

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

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

并以这种方式更改您的jQuery：

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

如果该CSS代码对您不起作用,请使用完整的动画CSS规则,因为大多数浏览器均不支持速记animation-iteration-count.