如何在第二次單擊按鈕時重複@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

您可以將顯示設置爲無並將其恢復到先前的模式。

您也可以爲動畫創建類，然後在單擊元素時將其刪除/添加。

Answer 2

添加一個新的類吧，所在班級有這個動畫計時功能：

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