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

Question

我想在第二次点击按钮时重复@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>

我该如何解决这个问题？

Answer 1

为它添加一个新的类，其中类有这个动画定时功能:

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

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

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

如果该 CSS 代码不适合您，请使用完整的 animation CSS 规则，因为大多数浏览器不支持简写 animation-iteration-count .