Как повторить @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

вы можете установить отображение на none и восстановить его в предыдущем режиме.

вы также можете создать класс для анимации, а затем удалить/добавить его при нажатии на элемент.

Answer 2

Добавить новый класс для этого, где класс имеет эту функцию анимации синхронизации:

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

и изменить свой Jquery так:

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

Если CSS код не работает для вас , пожалуйста, используйте полное правило CSS animation, так как большинство браузеров не поддерживают стенографию animation-iteration-count.