把CSS动画的时间或持续时间在一个div

Question

我想把我的“动漫界”的“持续时间”或“时间”与jQuery。当点击该按钮边框开始闪烁，但并没有停止:)

 $(document).ready(function() {
    $( "#btn_effect" ).click(function() {       



   $("#live_data").css({
       animation:"blink 1s step-start 1s infinite",
       times:6,
       duration:5000
   });
});
}); 


<style>
   .live_data {
     position: absolute;
     text-align: center;  
     left:300px;
     width: 1120px;
     height:800px;
     margin-top:  20px;
     padding-right: 6px;
     border: 10px solid blanchedalmond;
     overflow: auto;

@-webkit-keyframes blink { 50% { border-color: #ff4d4d; }  }

 </style>


  <div class="live_data" id="live_data"></div>

Answer 1

    $(document).ready(function() {
         $( "#btn_effect" ).click(function() {       

             $("#live_data").removeClass("blinkclass");
             setTimeout(function(){
                $("#live_data").addClass("blinkclass");
              },100);
          });
    });
    <style>
    .blinkclass {
       animation:blink 1s step-start 1s infinite;
       animation-iteration-count: 6;
        animation-duration: 5s;
        animation-fill-mode: forwards;
     }
     </style>

尝试这个