How to repeat @keyframes when I click a button in the second time?

Question

I want to repeat @keyframne animation when I click a button in the second time but it's just effect once.

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

How can I solve this problem?

Answer 1

Add a new class for it, where the class has this animation timing function:

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

And change your jQuery this way:

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

If that CSS code is not working for you, please use the full animation CSS rule as most of the browsers do not support the shorthand animation-iteration-count .

Answer 2

you can set display to none and restore it to previous mode.

you can also create class for animation and then remove/add it when you click on element.