当我第二次点击一个按钮时，如何重复@keyframe？

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。

Answer 2

您可以将display设置为none，并将其恢复为以前的模式。

您还可以为动画创建类，然后在单击element时删除/添加它。